Question

是否有一种方法只能将特定的div分为两列？以及div垂直对齐的方式。

我的css文件如下所示

Traceback (most recent call last):
  File "runpy.py", line 193, in _run_module_as_main
  File "runpy.py", line 85, in _run_code
  File "C:\Python36\pip3.exe\__main__.py", line 5, in <module>
ModuleNotFoundError: No module named 'pip'

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

#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;
}

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

Answer 1

要将这些对对齐到与注释中所述的高度相同，可以将display: flex应用于容器，并将flex-items的width定义为50％，同时具有一组通常，这些DIV的默认设置为100％，以便其他DIV占据整个容器宽度：

#views-form {
  display: flex;
  flex-wrap: wrap;
}

#views-form>div {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid green;
}

#views-form .item-list {
  width: 50%;
}

<form id="views-form">
  <div>something</div>
  <div class="item-list"> some text some more text some more text some more text some more text some more text  </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text </div>
  <div>something else </div>
</form>

有没有一种方法只能将某些<div>标签垂直拆分为两列？

1 个答案: