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

Question

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

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

的想法是，这个框是一个父div，它可以是任意宽度，这三个子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添加到它的父元素(如果.block是最外层的元素，则可能是body元素)，然后将text-align: left添加到.block。

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

Answer 2

Table-row

 list-display: table-row;

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

float: left;

为所有三个子div设置一个宽度，并使用:float: left;你可以在父元素中使用clear: both;正确清除浮动