Question

我在一个块中有2个块需要显示内联，但是当我提供display-inline时它不起作用。

我需要并排显示2个块而不是重叠

HTML：

<div class="outer-container">
    <div class="inner-container">
        <div class="innermost-container" />
        <div class="innermost-container" />

    </div>
</div>

CSS

.innermost-container{
    background-color:green;
    width:100px;
    height:100px;
    border-style:solid;
    border-width:5px;
}

Answer 1

您无法自行关闭div元素。即使它们是空的，您也需要明确地使用结束</div>标记。关闭它们，然后使用display: inline-block; .innermost-container

.innermost-container{
    background-color:green;
    width:100px;
    height:100px;
    border-style:solid;
    border-width:5px;
    display: inline-block; /* Can also use float */
}

Demo

此后，您可以使用this工具验证您的标记。

Answer 2

1）你不能自我关闭div标签（<div />）和2）将你的div的显示属性设置为内联块：

display:inline-block;

<强> jsFiddle example

Answer 3

更改

<div class="innermost-container" />

到

<div class="innermost-container"></div>

<div />无效HTML标记。

写：

.innermost-container{display:inline-block;}

注意：

inline-block在元素之间留下空白区域。在同一行写入元素以避免空白。

写：

<div class="innermost-container"></div><div class="innermost-container"></div>

而不是

<div class="innermost-container"></div>
<div class="innermost-container"></div>

DEMO here.

Answer 4

Display:inline不关心维度，因此它会包含内容：http://jsfiddle.net/8T5RZ/7/

块在css中重叠

4 个答案: