gpt4 book ai didi

html - 有没有办法将一些
标签垂直分成两列?

转载 作者:行者123 更新时间:2023-11-28 00:32:07 25 4
gpt4 key购买 nike

有没有办法将特定的 div 分成两列?以及 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 标签分成两列。不幸的是,我无法将“元素列表”div 包装在其他标签中。我希望潜水垂直对齐。所以它看起来像下面这样:

<form>
<div></div>
<div class="item list"> 1 </div> | <div class="item list"> 4 </div>
<div class="item list"> 2 </div> | <div class="item list"> 5 </div>
<div class="item list"> 3 </div> | <div class="item list"> 6 </div>
<div> </div>
</form>

最佳答案

要将这些对对齐到与评论中所述相同的高度,您可以将 display: flex 应用于容器并定义 flex 元素的 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>

关于html - 有没有办法将一些 <div> 标签垂直分成两列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54346492/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com