Question

我有主容器940像素

主容器内有2个div，每个宽250px

我希望这些盒子与主容器对齐。然而问题是第二个div动态添加。因此，如果第二个div不在那里，第一个div应该居中。当第二个div被添加时，两个都应按照940 px主div进行记录。

我尝试了很多，但无法解决问题。请帮忙！

这是简化代码

CSS

   div.box {
    background: #EEE;
    height: 400px;
    width: 940px;
}
div.left {
    background: #999;
    float: left;
    height: 390px;
    width: 250px;
}
div.right {
    background: #666;
    height: 390px;
    width: 250px;
    float: left;
}
div.clear {
    clear: both;
}

HTML

 <div class="box">

       <div class="left">Tree</div>
       <div class="right">View</div> ( this div will dynamically add)
       <div class="clear" />

    </div>

由于

Answer 1

制作此remove clear:both;课程

http://jsfiddle.net/jWVxd/4/

CSS

  div.box {
    width: 940px;
    background: #EEE;
    height: 400px;
    display: table;
    padding:10px;
}
div.left {
    background: #999;
    display: table-cell;
    width: 250px;
}
div.right {
    background: #666;
    display: table-cell;
    width: 250px;
}

Answer 2

在div.box css

中试试这个

 margin:0px auto;

对于演示chk，JSFIDDLE DEMO

Answer 3

只需将margin:auto;添加到div.box即可，它将位于中心

<强> JS FIDDLE DEMO

<强>编辑：这里隐藏了第二个div（“.right”）和它正常工作

2nd Demo 现在按 Ctrl 与 - （减号）查看其位于中心

分中心问题

3 个答案: