gpt4 book ai didi

html - 图像扰乱了 div 位置

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

我有三个连续的 div,都带有 display: inline-block。左边的(绿色)包含一个图像。由于该图像,另外两个 div(蓝色和黄色)及其下方的 div(灰色)都位于图像高度的下方。

为什么一个 div 中的图像会影响行内 block 行中其他 div 的位置?我该如何避免?

* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
display: inline-block;
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
}
div.div2 {
background: blue;
}
div.div3 {
background: yellow;
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
<body>
<div class="wrapper">
<div class="div1">
<img src="" width="25px" height="25px">
</div>
<div class="div2">b</div>
<div class="div3">c</div>
<div class="div4">d</div>
</div>
</body>

最佳答案

试试 float:left; display:block; 而不是 inline-block 用于 div: Demo

CSS:

.div1, .div2,.div3 {
display: block;
float:left;
width: 300px;
height: 70px;
}

关于html - 图像扰乱了 div 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29228602/

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