布置三个子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>如何感人。对于内嵌和内嵌块元素来说，标记中它们之间不能有空格。

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添加到其父元素（可能是您的body元素，如果.block是您的最外层元素），然后将text-align: left添加到.block。

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

Answer 2

表列

list-display: table-row; 

父DIV和一览显示：表细胞;对孩子们。 然后在子div 3上右对齐。优点是你不需要指定宽度。

浮

float: left; 

在所有三个孩子设置一个宽度的DIV和使用：浮动：左;你可能在父母的第四个div中明确表示：两者;正确清理这些浮标。