Question

我无法找到一种优雅的方式让我的div显示如下，在CSS

中

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

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

对于奖励积分，如果它们可以在父div中垂直对齐，那将是非常棒的，但我可以在没有它的情况下顺利进行。

TIA。

Answer 1

您将需要设置父div的宽度并使用百分比来设置子divs宽度，或者您需要为子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和list-display上的
：table-cell;对孩子们。然后在子div上右对齐文字。优点是你不需要指定宽度。

<强>浮动

float: left;

在所有三个子div上设置宽度并使用：float：left;你可以在父母的第四个div中明确：两个;正确清理那些花车。

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

2 个答案: