css column-count：内部divによって列の内容が壊れています

CSSの列カウント機能を使用しようとしていますが、奇妙な動作が発生しています。css column-count：内部divによって列の内容が壊れています

カラムの内容が壊れています。

私はブートストラップ3を使用していて、ブートストラップパネルで列を埋めるためにしようとしています。しかしパネルは、CSSの列数によって分割/分割されています。

私は別のdivタグでパネルをラップしようとしましたが、これは何の違いもありません。

これは列にある項目の例である：

<div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <span class="glyphicon glyphicon-star yelloStar"></span> 
      <label class="float-left">name</label>    
     </div> 
     <div class="panel-body">  
      <span>text</span> <a href="#" class="btn btn-link">read more</a> 
      <a href="#" class="btn btn-primary btn-xs pull-right">ADD</a> 
     </div>  
    </div> 
</div>

出典

2016-04-26 Magick

パネル（クラス.panel）はinline-blockとして表示されなければならないし、次にそのwidthが100%に設定する必要があります。 .panelのこの変更を列数が設定されたdivに分離して、列に含まれていないパネルに影響を与えないようにすることが最善です。例：

.my-col-count-style .panel { 
    display: inline-block; 
    width: 100%; 
}

ここにはCodepen.io exampleがあります。

出典

2016-04-26 17:30:12

また、あなたはこれを達成するために、ブートストラップのグリッドシステムを試すことができます

<head> 
    <style> 
    .divElem{ 
     display:inline-block; 
    } 
    </style> 
</head> 
<body> 
    <div class="divElem"> 
    <div class="panel panel-default tick"> 
     <div class="panel-heading"> 
     <span class="glyphicon glyphicon-star yelloStar"></span> 
     <label class="float-left">name</label>    
     </div> 
     <div class="panel-body">  
     <span>text</span> <a href="#" class="btn btn-link">read more</a> 
     <a href="#" class="btn btn-primary btn-xs pull-right">ADD</a> 
     </div>  
    </div> 
    </div> 
    <div class="divElem"> 
    <h1> name</h1> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <span class="glyphicon glyphicon-star yelloStar"></span> 
     <label class="float-left">name</label>    
     </div> 
     <div class="panel-body">  
     <span>text</span> <a href="#" class="btn btn-link">read more</a> 
     <a href="#" class="btn btn-primary btn-xs pull-right">ADD</a> 
     </div>  
    </div> 
    </div> 
</body>

コード

以下この

てみような何かを探している場合。

出典

2016-04-26 17:42:26 Sumac

css column-count：内部divによって列の内容が壊れています

答えて

関連する問題