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

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

有可能的。

这是工作解决方案

编码：

    <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/