文章/答案/技术大牛

发布

社区首页 >问答首页 >css column-count:列内容被内部div破坏

问css column-count:列内容被内部div破坏
EN

Stack Overflow用户

提问于 2016-04-27 00:41:34

回答 2查看 233关注 0票数 0

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

列内容正在损坏。

我正在使用Bootstrap 3，并尝试用bootstrap面板填充这些列。但是当它按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>

twitter-bootstrap

html

css

回答 2

Stack Overflow用户

发布于 2016-04-27 01:30:12

面板(类.panel)必须显示为inline-block，然后它们的width需要设置为100%。最好使用列计数集将.panel的修改隔离到div中，这样就不会影响不在列中的面板。例如：

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

这是一个Codepen.io example。

票数 0

Stack Overflow用户

发布于 2016-04-27 01:42:27

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

尝试下面的代码

<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的网格系统来实现这一点。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36870910

复制

相似问题

问css column-count:列内容被内部div破坏
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css column-count:列内容被内部div破坏EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css column-count:列内容被内部div破坏
EN