HTML中的内联块元素
HTML中的内联块元素
提问于 2018-06-20 02:48:49
我的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。最终的效果应该像第二个代码片段一样，但看起来不像(代码)……
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-20 04:55:25
您不是只是删除了flexboxes并将所有中间容器设置为display:inline吗？就像这样。
.container {
background-color: red;
display: block;
}
.container {
background-color: red;
}
.inner1, .innero1, .innero2, .four {
display: inline;
}
.one,
.two,
.inner2,
.inner3 {
border: 2px solid black;
display: inline-block;
}
.two {
list-style-type: none;
}
ul {
margin: 0;
padding-left: 0px;
display:inline;
}<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>
Stack Overflow用户
发布于 2018-06-20 03:36:25
在我看来，您没有使用flex-wrap: wrap属性。如果你想让元素换行(就像典型的html/css)，那么你需要告诉它换行。
下面是一个超级基础的例子：
.container {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: flex-start
}
.item {
padding: 20px;
margin: 10px;
background: yellow;
color: #000000;
border: 1px solid #000000;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
</div>
我认为这回答了你的question...if，请不要再多说了。你不应该需要JavaScript来做你所要求的事情。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50935135
复制相关文章
相似问题