
如何让父元素中的子元素两行排列?
问题:
如何让父元素中的多个子元素并排排列,并在必要时自动换行?
回答:
可以通过使用 flexbox 布局来实现两行排列。flexbox 布局是一种 css 布局方法,允许子元素在父元素内自动对齐和分配空间。
示例代码:
html:
item1item2item3item4item5item6item7item8item9item10...
css:
#container {
width: 400px;
height: 200px;
border: 1px solid red;
position: relative;
overflow: hidden;
}
#flex-container {
width: 800px;
height: 200px;
background: pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#flex-container .item {
width: 150px;
text-align: center;
background: yellow;
height: 94px;
display: flex-item;
}
#more {
display: block;
position: absolute;
top: 160px;
right: 10px;
z-index: 5;
width: 80px;
height: 30px;
background: green;
border-radius: 5px;
text-align: center;
color: white;
cursor: pointer;
}javascript:
document.getElementById("more").onclick = function() {
this.style.display = "none";
document.getElementById("container").style.overflow = "scroll";
};基本原理:










