javascript - CSS:图像边距留下空白

Question

所以我有这个 HTML:

<div id="red_box">

<img id="myImage" alt="Fechar caixa de texto" src="http://quindigo.eti.br/Imagens/IconePequenoQuindigo.png">

<span id="spanOfTheBox">the Text </span>

</div>

还有这个 CSS:

#red_box{
    width:40%;
    background-color:white;
    color:black;
    border:5px double red;
    display:inline-block;
    margin-top:50px;
}

#myImage{
    margin-left:102%;
    display:inline-block;
}

#spanOfTheBox{
    display : inline-block;
    width : 100%;                  
    height : inherit;
}

正如您在 fiddle 中看到的那样，span 元素仍位于 img 元素下方。似乎应用于 img 的 margin-left 占据了可以用 span 填充的空间。这是正确的吗？

Answer 1

如果您希望 span 占据该空间，请考虑使用 float 将两个元素并排放置。

如果您想保留这个 margin-left，您可以将 position 属性修改为 absolute/fixed 并将其也放置在该空间中，但 float 解决方案会更干净。