Question

我正在尝试使用CSS创建简单的水平堆栈而不是单词，我注意到当其他div为空时，不可能将两个div水平堆叠，而将一个内容居中。

以下是相关示例。我在chrome中尝试过它。 http://jsfiddle.net/mncmN/

<div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8);">
    <div style="text-align:center; display: inline-block;  "> <a>Summary</a>

    </div>
    <div style="text-align:center;  display: inline-block; height: 100%; border-right: solid gray 1px;"></div>
</div>

为什么会这样？

总而言之，我需要三件事。

1）内联div水平阻塞堆栈

2）其中的文本在中心（相对于父容器）对齐。

3）空div框作为边框。

Answer 1

这是一个更新的JSFIDDLE - 您正在寻找的是什么？

<div class="container"  >

    <div class="left">1</div>

    <div class="center">2</div>

    <div class="right">3</div>

</div>

Answer 2

有可能。

以下是 WORKING SOLUTION

守则：

    <div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8); display:table;">
    <div style="text-align:center; display: table-cell; background:#cccccc; vertical-align:middle; "> <a>Summary</a></div>
    <div style="text-align:center;  display: table-cell; background:gray; vertical-align:middle; height: 100%; border-right: solid gray 1px;">sdfsdfsdfsdf</div>
</div>

Answer 3

把它放在你的空div： 中。这是一个白色的空间。 div仍然看起来是空的，但现在你可以设置宽度和高度。

另外，尝试将CSS与html分开，就像在这个jsFiddle：http://jsfiddle.net/WzymM/

Answer 4

请查看示例[http://jsfiddle.net/mncmN/5/] [1]。希望这是你的问题？ `

<div style="margin: 0px; border: solid red 1px; width:100%; border-bottom: solid 1px black;">
     <div style=" border: solid gray 1px; text-align:center; display: inline-block; "> <a>Summary</a>
    </div>
        <div style="display: inline-block; text-align:center; border: solid gray 1px;">ff </div>
        <div style="display: inline-block; text-align:center; border: solid gray 1px;"> </div>
    </div>`


      [1]: http://jsfiddle.net/mncmN/5/

简单的Div / CSS布局无法按预期工作

4 个答案: