布置三个子div的正确方法是什么，一个在左侧，一个在中间，一个在父级右侧？

Question

我想不出一种优雅的方式让我的 div 在 CSS 中显示如下

---------------------------------------------------------
|                                                       | 
| child div 1           child div 2          child div 3|
|                                                       |
---------------------------------------------------------

这个想法是盒子是一个父 div，它可以是任何宽度，这三个孩子总是排成一行，左边是 1，中间是 2，右边是 3。

对于奖励积分，如果它们可以在父 div 中垂直居中对齐，那就太棒了，但我可以不这样做。

TIA。

Answer 1

您将需要设置父 div 的宽度并使用百分比来设置子 div 的宽度，或者您需要为子 div 提供固定宽度并允许父 div 围绕它们展开。以下是您可以开始使用的一些代码：

HTML：

<div class="block">
    <div class="sidebar">

    </div><div class="main">

    </div><div class="sidebar">

    </div>
</div>

注意结束的</div> 和后续的<div> 是如何接触的。对于要触摸的 inline 和 inline-block 元素，标记中它们之间不能有空格。

CSS：

.block { 
    border: 1px solid;
    display: inline-block; }
.block .sidebar {
    background: red;
    width: 100px;
    height: 40px;
    vertical-align: middle;
    display: inline-block; }
.block .main {
    background: blue;
    width: 400px;
    height: 100px;
    vertical-align: middle;
    display: inline-block; }
.block div { margin: 0; }
.block p { margin: 0; }

如果您决定将.block 设为固定宽度，请删除display: inline-block。

仅当.block 没有固定宽度时才适用：

如果您需要将.block 水平居中，您的margin: 0 auto 将不起作用，因为.block 是一个内联元素，需要它来环绕固定宽度的元素。您需要将text-align: center 添加到其父元素（如果.block 是您的最外层元素，则可能是您的body 元素），然后将text-align: left 添加到.block。

预览：http://jsfiddle.net/Wexcode/jfQqF/

Answer 2

表格行

 list-display: table-row;

在父 div 和 list-display 上：table-cell;在孩子们身上。 然后在子 div 3 上右对齐文本。优点是您不需要指定宽度。

浮动

float: left;

设置所有三个子 div 的宽度并使用：float:left;您可能会在父级中添加第四个 div，并使用 clear: both;正确清除这些浮动。