Question

基本上，我试图并排获得两个div，这是我试图做的以下布局。

<div id="content">
    <div id="search">

    </div>
    <div id="results">
        <h2>Waiting!</h2>
    </div>
</div>

这里的CSS是定位这些div它们并排，但当我希望它们居中时完全推到页面的左侧。

#content {

}
#search {
    float: left;
    width: 400px;
    height: 350px;
    margin: 10px auto;
    overflow: auto;

    -moz-box-shadow: #555 0 0 8px;
    -webkit-box-shadow: #555 0 0 8px;
    -o-box-shadow: #555 0 0 8px;
    box-shadow: #555 0 0 8px;
}

#results {
    float: left;
    width: 400px;
    height: 350px;
    margin: 10px auto;
    overflow: auto;

    -moz-box-shadow: #555 0 0 8px;
    -webkit-box-shadow: #555 0 0 8px;
    -o-box-shadow: #555 0 0 8px;
    box-shadow: #555 0 0 8px;
}

Answer 1

您可以使用margin：0 auto将容器区域居中。试试这个 -

#content{ margin: 0 auto; width: 90%; }

这可能会有所帮助。

Answer 2

你必须将包装div居中，使它们都居中。试试吧http://jsfiddle.net/dAVub/

#content {
    width:800px;
    margin: 0 auto;
}

Answer 3

有很多方法可以做到这一点，但最重要的是，当内部元素浮动时，应该在容器上适当设置overflow。例如，你可以用以下代码完全替换你的CSS：

#content {
   overflow:hidden;  /* or auto, or visible */
   width:820px;
   margin-left:auto; /* not necessary by default */
   margin-right:auto; /* not necessary by default */
}

#content > div {
   float:left;
   margin: 10px auto;
   -moz-box-shadow:#555 0 0 8px;
    -webkit-box-shadow:#555 0 0 8px;
    -o-box-shadow:#555 0 0 8px;
    box-shadow:#555 0 0 8px;
}

Answer 4

将此添加到您的css

#content {
text-align:center;}

将float:left替换为display:inline-block;中的#search和#results

Demo

两个div并排

4 个答案: