Question

我的问题是关于CSS和DIV标签。我有一个动态页面，我想要一个容器DIV。有两种情况：在一种情况下，这个容器DIV中只有一个DIV，宽度为50％，并且应该居中。在另一种情况下，它将有两个DIV，它们应该并排，每个DIV占50％。

我试过浮动：中心（使用溢出：隐藏在容器DIV上），它适用于1 DIV，但有两个，它们堆叠在一起。如果我使用float：left，那么2 DIVS看起来是正确的，但是单个DIV是左对齐的，而不是居中。

非常感谢有关如何有效实现这一目标的任何帮助！

<div style="width:800; margin: 2px; background-color:blue">
    <div style="width:50%;  background-color:orange;">
        Text
    </div>
    <div style="width:50%; background-color:red;">
        Text
    </div>
</div>

jsFiddle

Answer 1

对于双分区场景：

<div style="width:800; margin: 2px; background-color:blue; display: table;">
    <div style="background-color:orange; display: table-cell;">
        Text
    </div>
    <div style="background-color:red; display: table-cell;">
        Text
    </div>
</div>

现在为one-div场景：

<div style="width:800; margin: 2px; background-color:blue; display: table;">
    <div style="background-color:orange; display: table-cell;">
        Text
    </div>
</div>

在每种情况下，内部div（无论是1还是2）将占用外部div的100％。从本质上讲，它的行为类似于<table>元素而没有<table>的语义。

Answer 2

检查此fiddle

HTML

<div class="wrapper">
    <div class="divholder"> 
        <div style="background-color:orange;">DIV 1</div>
        <div style="background-color:red;">DIV 2</div> 
    </div>
</div>

CSS

.divholder div{
    display:inline-block;
    margin:auto;
    width:49%;

}
.divholder {
    text-align:center;
    margin: 0 auto;
    position:relative;
}
.wrapper{
    width:100%;
    background-color:blue;
}

这完全可以满足你的需要......虽然只有一个div，div会居中，如果有两个div，那么两个div将被平分并向左浮动。请看fiddle ..

Answer 3

与chharvey's answer类似，使用display: table;

可以很好地实现这一点

在我的示例中，它是水平居中的，可以使用任意数量的列，因为它们适合div.wrap的整个宽度。列目前的高度为100％，可以调整。

Have a jsBin example!

HTML

<div class="wrap">
    <div class="column">
    </div>
    <div class="column">
    </div>
</div>

CSS

html,body {
    height: 100%;
}

.wrap { 
    display: table;
    width: 800px; 
    height: 100%;
    margin: 0 auto;
}

.column {
    display: table-cell;
    background: #FF0;
}
.column:first-child {
    background: #F00;
}

CSS DIV与动态内容对齐

3 个答案: