我有以下问题,我有在 flex-wrap 内输入的表单,但在少数表单中我有 <textarea rows="5"></textarea>
它需要比输入字段更高的高度。是否可以在 flex-wrap 中有以下结构:
这 2 个输入字段是否一个位于另一个下方,但位于它们的 .holder div 中?
https://jsfiddle.net/by06rreq/
CSS:
.flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.holder {
width: 30%;
}
input, textarea {
width: 100%;
}
.holder.textarea {
width: 65%;
}
HTML:
<div class="flex">
<div class="holder textarea">
<textarea name="test" rows="5"></textarea>
</div>
<div class="holder">
<input type="text">
</div>
<div class="holder">
<input type="text">
</div>
</div>
最佳答案
你可以看到.. 你想要这样吗。我尝试过使用多布局 css。通过 column-count
.flex {
column-count: 2;
column-gap: 0;
}
.holder {
width: 50%;
margin-bottom: 15px;
}
input, textarea {
width: 100%;
}
.holder.textarea {
width: 65%;
margin-bottom: 0;
}
<div class="flex">
<div class="holder textarea">
<textarea name="test" rows="5"></textarea>
</div>
<div class="holder">
<input type="text">
</div>
<div class="holder">
<input type="text">
</div>
</div>
关于html - 当空间可用时将元素一个接一个地添加到另一个 Flexbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47093707/