html - 什么时候子元素会影响父元素的位置？

Question

我放了一个<img>元素变成 <div>元素。我想 <img>只是在那里，但它改变了 <div> 的位置元素。

我的 HTML 的简化结构:

<div class="box" id="box6">
<img src="circle-shape-outline.svg">

</div>

还有 CSS:

div.box {
    display: inline-block;
    margin: 0px;
    border: 2px solid #364F6B;
    border-top: none;
    border-left: none;

    width: 32.9%;
    height: 33%;
 }

div#box6 {
    border-right: none;
}

截图:

我该如何解决？您可以在 codePen 上查看完整代码谢谢

Answer 1

你的 <div>我们有display: inline-block所以当你添加 <img>它会尝试将图像调整到当前行的底部。

可以设置float: left在图像或集合上position: relative在 #box6然后 position: absolute在 <img>放置在 div 中您想要的任何位置。