我的HTML代码是这样的,我不能编辑它:
.container {
background-color: red;
display: flex;
}
.container {
background-color: red;
}
.innero1 {
display: flex;
}
.one,
.two,
.inner2,
.inner3 {
border: 2px solid black;
display: inline-block;
}
.two {
list-style-type: none;
}
.inner2,
.inner3 {
margin-left: 3px;
height: max-content;
}
ul {
margin: 0;
padding-left: 3px;
}
<div class="container">
<div class="innero1">
<div class="inner1">
<div class="one">Text1</div>
<div class="one">Text2</div>
<div class="one">Text3</div>
<div class="one">Text4</div>
</div>
<div class="inner2">Text5</div>
<div class="inner3">Text6</div>
</div>
<div class="innero2">
<div class="four">
<ul>
<li class="two">Text7</li>
<li class="two">Text8</li>
</ul>
</div>
</div>
</div>
正如您所看到的,div
的行为与典型的内联块不同。
我想要实现的是让它看起来像这样(当调整大小时,它们会跳到下一行):
.one {
border: 2px solid black;
display: inline-block;
}
<div class="container">
<div class="one">Text1</div>
<div class="one">Text2</div>
<div class="one">Text3</div>
<div class="one">Text4</div>
<div class="one">Text5</div>
<div class="one">Text6</div>
<div class="one">Text7</div>
<div class="one">Text8</div>
</div>
我在考虑使用jQuery detach
,但我觉得这不是个好主意……
编辑:我不想更改我的html。最终的效果应该像第二个代码片段一样,但看起来不像(代码)……
https://stackoverflow.com/questions/50935135
复制相似问题