Question

我希望div.div-block和p.div-p保持默认display:block，但div-inline为display:inline。所需的结果是三个水平div's，每个都有几个垂直堆叠的p's块。

我已尝试div.div-block div {display:inline;}，但div.div-inline仍处于垂直位置。当我添加div.div-block div p {display:inline;}时，div's是水平的，p's也是如此。

<div class="div-block">
    <div class="div-inline">
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
    </div>
    <div class="div-inline">
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
        <p class="p-block">Bla bla bla</p>
    </div>
    <div class="div-inline">
        <p class="p-block">Bla bla bla</p>
    </div>
</div>

Answer 1

您正在寻找的内容可能是inline-block。如果您让.div-inline班级有div.div-inline {display:inline-block;}，他们会彼此相邻。当然包装仍然有效，所以如果div从页面上掉下来，它仍会包裹整个块。

Answer 2

您需要使用设置宽度的display: inline-block。宽度很重要，因为当你的内容过去时，＃bla; bla bla bla＆＃34;你会遇到包装问题。此外，还需要vertical-align: top才能将文字置于顶部。

.div-inline {
    display: inline-block;
    width: 33%;
    vertical-align: top; }

另外，如果你关心IE7的兼容性，你需要一些IE7黑客攻击。我通常使用以下内容来兼容IE7：

.div-inline {
    display: inline-block;
    *display: inline;  // IE7
    *zoom: 1;          // IE7
    width: 33%;
    vertical-align: top; }

这是JSFiddle

Answer 3

您需要的只是向左浮动到您正在谈论的内联div。

.div-inline{
    float : left;
    width:33%;
}

.clear{
    clear:both;
}

您必须处理clearfix以便在新块上连续播放下一个内容。您还需要根据所需的列数设置宽度。这里的工作小提琴有明确的固定和宽度。

http://jsfiddle.net/kXpX2/3/

显示包含P块的内联DIV

3 个答案: