Question

是否有一种方法只能将特定的div分为两列？

我的css文件如下所示

#views-form
 {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  padding-left: 0;
}

#views-form .item-list {
  list-style-position: inside;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

但是它导致将表单内的所有div分为两列。

<form id="views-form">
   <div></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
    ....
   <div></div>
</form>

我需要将带有“ item-list”类的div标签分成两列。不幸的是，我无法在其他标签中包装“ item-list” div。

Answer 1

这在Firefox中不起作用：请参见：Browser Compatibility table，MDN columns-span doc上的this bugreport

#views-form {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  padding-left: 0;
}
#views-form > div {
  -webkit-column-span: all; 
  -moz-column-span: all;
  column-span: all;
}

#views-form > .item-list {
  list-style-position: inside;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;

}

<form id="views-form">
   <div>1</div>
   <div class="item-list">2</div>
   <div class="item-list">3</div>
   <div class="item-list">4</div>
   <div class="item-list">5</div>
   <div class="item-list">6</div>
   <div>7</div>
</form>

Answer 2

您可以像这样

.two-col
 {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  padding-left: 0;
}

#views-form .item-list {
  list-style-position: inside;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;

}

<form id="views-form">
   <div>1</div>
   <div class="two-col">
     <div class="item-list">2</div>
     <div class="item-list">3</div>
     <div class="item-list">4</div>
     <div class="item-list">5</div>
     <div class="item-list">6</div>
   </div>
   <div>7</div>
</form>

Answer 3

为什么不使用flex？

.views-form {
  display: flex;
  flex-wrap: wrap;
}
.views-form > div {
  flex-basis: calc(100% - 20px);
  box-sizing: border-box;
  background-color: silver;
  margin: 10px;
}

.views-form > .item-list {
  flex-basis: caLc(50% - 20px);
  box-sizing: border-box;
  background-color: gold;
}

<form class="views-form">
   <div>...</div>
   <div class="item-list">a</div>
   <div class="item-list">b</div>
   <div class="item-list">c</div>
   <div class="item-list">d</div>
   <div class="item-list">e</div>
   <div>...</div>
</form>

IMHO CSS columns规则仅对复制文本有用，而对在多列中显示后续容器不有用。这是因为columns规则的读取顺序（从下至上，右至第二）。这将迫使用户向下滚动到第一列的结尾，然后向上滚动到第二列的开头。没有人想要。如果您仔细阅读MDN guide on Multicol，将会看到所有示例仅是文本。

有没有办法只将某些<div>标记分成两列？

3 个答案: