Question

我正在尝试使用CSS列计数功能，但是我遇到了一些奇怪的行为。

列内容破裂。

我正在使用Bootstrap 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>

Answer 1

面板（类.panel）必须显示为inline-block，然后他们的width需要设置为100%。最好将.panel的此修改与列数设置隔离到div，这样您就不会影响不在列中的面板。例如：

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

这是Codepen.io example。

Answer 2

如果你正在寻找这样的东西

尝试以下代码

<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>

此外，您可以尝试使用bootstrap的网格系统来实现此目的。

css column-count：列内容被内部div

2 个答案: