html - 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 是“ block 级元素”，这意味着它们每个都将换行。

对于您的示例，您需要查看“inline”或“inline-block”显示属性，这将使您的元素彼此相邻排列(只要父元素中有足够的空间)容器)。所以，试试这个:

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