CSS文本和图像在同一行

Question

我需要连续对齐pic-text-pic。

<style type="text/css">
    #element1 {background: url('url1'); margin-right: 10px}
    #element2 {margin-right: 10px}
    #element2 {background: url('url2')}
</style>

<div id="element1">
    element 1 markup
</div>
<div id="element2">
    element 2 markup
</div>
<div id="element3">
    element 2 markup
</div>

我尝试过玩，只是无法实现。

有任何想法吗？

Answer 1

您需要研究CSS的各种显示属性，以及它们如何在浏览器中创建布局。 默认情况下，DIV是“块级元素”，这意味着它们每个都将换行。

对于您的示例，您需要查看“内联”或“内联块”显示属性，这将使您的元素彼此并排（只要父容器中有足够的空间）。 因此，请尝试以下操作：

#element1,
#element2,
#element3 {
    display: inline-block;
}

Answer 2

尝试使用<span>标记而不是<div> 。

Answer 3

使用display: inline-block ：

#element1,
#element2,
#element3 {
    display:inline-block;
}

Answer 4

使用<span>而不是<div>