gpt4 book ai didi

html - 显示内联 block 的一些有线行为

转载 作者:行者123 更新时间:2023-11-28 02:42:34 25 4
gpt4 key购买 nike

更新就是inline-block元素是否包含什么的问题,大家可以搜索一下,找到更好的解决办法。


该页面包含三个 div(灰色矩形),第一个 div(父)包含三个蓝色子 div。父div是inline-block,子div也是一样的。为什么第一个 parent-div 向下移动?我认为它们应该排成一行。

<body>
<section>
<div class = "container">
<div class = "load_1"></div>
<div class = "load_1"></div>
<div class = "load_1"></div>
</div>
<div class = "container">

</div>
<div class = "container">

</div>
</section>
</body>

CSS

           section{
width:100%;
height:100vh;
background-color: rgba(236, 240, 241,1.0);
}
div.container{
display: inline-block;
width:150px;
height:150px;
margin:10px;
background-color: rgba(189, 195, 199,1.0);
border-radius: 5px;
}
div.container:first-child{
margin-left: 20px;
}
div.container .load_1{
width:20px;
height:20px;
display: inline-block;
background-color: rgba(52, 152, 219,1.0);
}

请在此处查看JSfiddle.

最佳答案

只需将 float:left 放在 div.container

检查下面的代码:

    section {
width: 100%;
height: 100vh;
background-color: rgba(236, 240, 241, 1.0);
}

div.container {
/* display: inline-block; */
width: 150px;
height: 150px;
margin: 10px;
background-color: rgba(189, 195, 199, 1.0);
border-radius: 5px;
float: left;
}

div.container:first-child {
margin-left: 20px;
}

div.container .load_1 {
width: 20px;
height: 20px;
display: inline-block;
background-color: rgba(52, 152, 219, 1.0);
}
<section>
<div class="container">
<div class="load_1"></div>
<div class="load_1"></div>
<div class="load_1"></div>
</div>
<div class="container">

</div>
<div class="container">

</div>
</section>

关于html - 显示内联 block 的一些有线行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43119247/

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