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默认为＆＃34;块级元素＆＃34;这意味着他们每个人都会打破一条新线。

对于您的示例，您将要查看＆＃34;内联＆＃34;或＆＃34;内联块＆＃34;显示属性，它将使元素彼此相邻排列（只要父容器中有足够的空间）。所以，试试这个：

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

Answer 2

尝试使用<span>代码而不是<div> s。

Answer 3

使用display: inline-block：

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

Answer 4

使用<span>而非<div>

Css文本和图像在同一行

4 个答案: