gpt4 book ai didi

html - 当连续有多个div时,如何避免让下一行排在最高div的底部?

转载 作者:行者123 更新时间:2023-11-28 12:12:03 24 4
gpt4 key购买 nike

我在文档中有一堆 div,每个 div 的宽度为 32%,但它们的高度各不相同。

CSS:

        body{
text-align: center;
}
div{
vertical-align: top;
display:inline-block;
border-style:solid;
width:32%;
}
.a{
background-color: lightcoral;
height:200px;
}
.b{
background-color: lightseagreen;
height:500px;
}

HTML:

 <body>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="a"></div>
</body>

问题是当新行开始时,该行的每个div都定位在相同的y值,我需要它们是连续的,上下div之间没有空格。有办法实现吗?

https://jsfiddle.net/pn3dz9fg/

最佳答案

https://jsfiddle.net/yq4xubph/1/

可能不完全是你的想法,但你明白了

<body>
<div class='row'>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
</div>
<div class ='row'>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="a"></div>
</div>

</body>

body{
text-align: center;
display:inline-block;
width:100%;
}
.a,.b{
vertical-align: top;
display:block;
border-style:solid;


}
.row{
width:32%;
vertical-align: top;
display:inline-block;
}

.a{
background-color: lightcoral;
height:200px;
}
.b{
background-color: lightseagreen;
height:500px;
}

关于html - 当连续有多个div时,如何避免让下一行排在最高div的底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29461631/

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