标签: column-count

使用列计数时,溢出的内容在除第一列之外的所有内容中完全消失,为什么？

当column-count在包装器中使用,并且包装器中的容器已经border-radius应用,并且容器中的内容溢出时,除了第一个列之外,内容完全消失在所有列中.

这是我的例子:https://jsfiddle.net/f4nd7tta/
红色半圆只在第一列中可见,为什么？

#main_wrap{
    width:100%;
    border:solid 1px black;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
#main_wrap > div{
    border-radius:5px;
    overflow:hidden;
    position:relative;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    width:70%;
    height:300px;
    border:solid 2px grey;
    margin:2px;
}
#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
}

Run Code Online (Sandbox Code Playgroud)

<div id="main_wrap">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

Run Code Online (Sandbox Code Playgroud)

css css3 column-count css-multicolumn-layout

Edu*_*rdó

2017 10-02

26
推荐指数

2
解决办法

9252
查看次数

我可以水平而不是垂直订购我的CSS列吗？

这是我的代码:

.column {
    column-count: 4;
    column-gap: 10px;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="column">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
</div>

Run Code Online (Sandbox Code Playgroud)

其结果是:
1 4 7 10
2 5 8 11
3 6 9 12

我想要的是:
1 2 3 4
5 6 7 8
9 10 11 12

那可能吗？我该怎么做？

css css3 column-count css-multicolumn-layout

Ala*_*ong

2017 10-06

18
推荐指数

1
解决办法

1万
查看次数

列数不适用于Chrome

我有一个分为4列的文本,它在Safari中完美运行我不知道为什么我只能在Google Chrome中看到2列.

使用Chrome 55.0.2883.95(64位)测试

任何帮助将不胜感激.

#people{
 -webkit-column-count:4;
 -moz-column-count:4;
 column-count:4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
}

.keeptogether{
  display:inline-block;
  width:100%
}

Run Code Online (Sandbox Code Playgroud)

<div id=people>
<div class=keeptogether>
A<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>

<br>B<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>C<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
D<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>E<br>
fhdjsklfhs<br>
<br>F<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>G<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>H<br>
fhdjsklfhs<br>
<br>I<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>J<br>
<br>K<br>
fhdjsklfhs<br> …

Run Code Online (Sandbox Code Playgroud)

css google-chrome column-count css-multicolumn-layout

Fed*_*ico

2017 08-26

11
推荐指数

2
解决办法

1万
查看次数

使用列计数,如果分辨率更小,您可以动态地从3列更改为2列吗？

我正在使用该column-count属性设置一个包含三列多个div的页面,这在较大的屏幕上看起来很棒.每个div的固定宽度为500px(包含图像).

但是,当在较小的屏幕上工作时,浏览器会尝试强制原始\三列中的内容进入两列.当内容开始重叠时,是否有一个首选的方法让内容转到两列？

css css3 responsive-design column-count css-multicolumn-layout

nat*_*ner

2017 10-06

7
推荐指数

1
解决办法

4694
查看次数

CSS列数和Chrome错误:如何避免溢出内容被裁剪

当column-count使用时,它似乎裁剪任何溢出的内容.

#columns {
  -webkit-column-count: 1;
  -webkit-column-gap: 10px;
  /*-webkit-column-fill: auto;*/
  -moz-column-count: 1;
  -moz-column-gap: 10px;
  /*-moz-column-fill: auto;*/
  column-count: 1;
  column-gap: 10px;
  /*column-fill: auto;*/
  border: 1px solid red;
  overflow: visible;
}
.pin {
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
}

Run Code Online (Sandbox Code Playgroud)

<div id="columns">

  <div class="pin">

    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="#.jpg" />
    </a>
    <h3>Product 1</h3>
    </a>
  </div>

</div>

Run Code Online (Sandbox Code Playgroud)

结果:

我有什么想法可以解决这个问题？

编辑1:

现在看来,这是一个错误的Chrome浏览器.

它在Firefox上很好:

编辑2:

span.onsale {
    min-height: 3.236em;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em; …

Run Code Online (Sandbox Code Playgroud)

html css column-count

lau*_*kok

2016 03-15

6
推荐指数

2
解决办法

3443
查看次数

CSS 列数没有填满整个区域

我正在尝试使用 css3 规则在 8 列中显示项目column-count。但是，有时显示 6，有时显示 7。我尝试为项目设置特定宽度，但似乎没有任何效果。

单击此处查看小提琴

body {margin: 0;}
.container {
  margin: auto;
  padding: 0 15px;
  background: #eee;
}
@media (min-width: 768px) {
  .container {width: 750px;}
}
@media (min-width: 992px) {
  .container {width: 970px;}
}
@media (min-width: 1200px) {
  .container {width: 1170px;}
}
.brick-wall {
  -webkit-column-gap: 0;
  -webkit-column-fill: balance;
  -moz-column-gap: 0;
  -moz-column-fill: balance;
  column-gap: 0;
  column-fill: balance;
  -webkit-column-count: 8;
  -moz-column-count: 8;
  column-count: 8;
}
.brick {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  text-align: center;
}
.brick-wall …

Run Code Online (Sandbox Code Playgroud)

css column-count

Dit*_*tto

2016 07-04

6
推荐指数

1
解决办法

1024
查看次数

我正在使用 css column-count 功能将我的部分分成两列。在一个页面上，我在第一列的底部有一个 h3 标题，在下一列的顶部有下面的 p 段落。我想保留段落的前几句话的标题。我可以将它与整个段落一起包装在一个带有内联块样式的 div 中。这适用于短段落，但不适用于长段落。我也可以随意拆分段落，但如果在标题之前添加了额外的内容，我可能不得不将其重新组合在一起，迫使它进入下一列。如果不可能，因为列数是新的，我不会感到惊讶。

更新

根据下面@Jon 的建议，我尝试从网上找到的示例中闯入，因为我知道了关键字。

CSS：

.heading-with-text    {
   -webkit-column-break-inside: avoid;
   -moz-column-break-inside: avoid;
   break-inside: avoid;
}

Run Code Online (Sandbox Code Playgroud)

HTML：

<section class="heading-with-text">
    <h3>Blah, Blah</h3>
        <p>woof, woof</p>
</section>

Run Code Online (Sandbox Code Playgroud)

在 OS X 平台上，它在 Firefox 24.0 中根本不起作用。在 Safari 6.0.5 和 Chrome 30.0.1599.66 中，它将标题移动到下一列，使其位于文本上方。但是，无论我在段落中添加多少文本，浏览器都不会在段落中打断。它就像内联块一样工作。我猜他们把“避免”理解为不惜一切代价避免。这种方法似乎是正确的方法。只是目前没有得到很好的支持。

html css column-count

cur*_*urt

2013 10-04

5
推荐指数

1
解决办法

3927
查看次数

CSS 列数列的高度不同

我正在尝试创建图像的砌体网格，总体思路是使用列计数来实现此示例。

我有三列，其中有一堆图像，CSS 和 HTML 与链接中的相同。问题是列无法正确对齐。最右边的一列通常比其他列短得多。显然，除非图像大小相同，否则列永远不会完美对齐，但差异远大于此。有时，前两列各容纳十个图像，但第三列仅容纳两个（图像大小相似），这意味着您可以轻松地将一些图像从第一列和第二列移动到第三列以获得更好的对齐效果。这个结果似乎违背了列计数的想法。

如果您将某些图像更改为更小的图像，上面的链接也会发生这种情况。是否只是列计数仍然存在错误且不应该使用，或者是否有一些技巧可以阻止这种情况发生？

编辑：这是基本的CSS（减去许多基本样式，例如过渡和其他内容，我试图将其删除以查看它们是否是罪魁祸首）。

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}

#columns {
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 4;
    column-gap: 15px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
}

Run Code Online (Sandbox Code Playgroud)

这是一个显示问题的 JSFiddle。有四列，但在 Chrome …

css column-count css-multicolumn-layout

Eri*_*onn

2017 10-06

5
推荐指数

1
解决办法

2万
查看次数

强制 div 到下一列

我正在使用column-count. 使用列的问题是事实，就像文本一样，甚至图像也会损坏。所以图像的上半部分可以在一列中，下半部分可以在第二列中。我通过添加display: inline-block到列中的项目解决了这个问题。这让我解决了当前的问题：
acolumn-count为 3 且有 7 个项目，项目显示为 [3][3][1]。

[item]   [item]   [item]
[item]   [item]
[item]   [item]

Run Code Online (Sandbox Code Playgroud)

我希望项目显示为 [3][2][2]。所以问题是：我可以将其中一个 div 强制到下一列吗？

HTML

<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS

#container {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    width: 100%;
}
.item {
    background: red;
    /*-webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;*/
    display: inline-block;
    height: 250px;
    margin-bottom: 20px;
    width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

提琴手

注释掉的部分是防止图像损坏的第二种方法，但它不如简单的display:inline-block …

html css column-count

Pau*_*ool

2014 05-22

5
推荐指数

2
解决办法

1万
查看次数

列计数属性在 Firefox 上不起作用

我使用了 CSS3 多列功能，使用该column-count属性将其拆分为多列。

这是我的代码：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Run Code Online (Sandbox Code Playgroud)

它不适用于我的 Firefox 版本或 Firefox 开发人员版本。代码适用于：Google Chrome、Opera 和 Microsoft Edge。

这是一个错误还是有任何解决方案？

css column-count

Nis*_*arg

2018 09-04

5
推荐指数

1
解决办法

7874
查看次数

标签统计

column-count ×10

css ×10

css-multicolumn-layout ×5

css3 ×3

html ×3

google-chrome ×1

responsive-design ×1

标签 统计

标签统计