gpt4 book ai didi

html - 在具有自定义限制的多行上显示 div

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

我正在尝试放置 6 个盒子,作为了解如何操作的小练习。我希望将这 6 个盒子分成一行 4 个盒子,然后在第二个盒子中分成 2 个,我想用 CSS 中的显示功能来做到这一点,所以这不仅适用于这种情况。这就是我一直在尝试的。 https://gyazo.com/f64788cdf85d263e56452c1412fdcfb0?token=f6c45c6813c3fc47addb63483cee3f6a

    .parent{
display: flex;
flex-wrap: wrap;
}

.parent-wrapper {
height:100%;
width:100%;
border: 1px solid black;}

.child {
width: 300px;
height: 200px;
background-color: green;
border: 1px solid red;
margin: 5px;
flex: 1 0 21%;
}

最佳答案

你可以使用 display: flex。

HTML:

<div class="flex">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

CSS (已编辑):

.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.flex div {
height: 200px;
background-color: green;
border: 1px solid red;
box-sizing: border-box;
/*flex: 1 0 23%;*/
width: 24.1%;
margin: 5px;
/*margin-bottom: 5px;*/
}

输出如下:

enter image description here

关于html - 在具有自定义限制的多行上显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54592159/

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