0

基本的に、私は 2 つの div を並べて取得しようとしています。これが私がやろうとしている次のレイアウトです。

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

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

これらの div を並べて配置している CSS を次に示しますが、中央に配置したい場合はページの左側に完全に押し込みます。

#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;
}
4

4 に答える 4

1

margin: 0 auto を使用してコンテナ領域を中央に配置できます。これを試して -

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

これは役立つかもしれません。

于 2013-07-20T16:54:25.253 に答える
0

これを行うには多くの方法がありますが、最も重要なことは、内部要素がフロートするときにコンテナーに を適切に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;
}
于 2013-07-20T16:49:50.827 に答える
0

これをcssに追加します

#content {
text-align:center;}

in およびinfloat:leftに置き換えますdisplay:inline-block;#search#results

デモ

于 2013-07-20T16:58:18.883 に答える
0

両方を中央に配置するには、ラッピング div を中央に配置する必要があります。ここでライブで試してみてくださいhttp://jsfiddle.net/dAVub/

#content {
    width:800px;
    margin: 0 auto;
}
于 2013-07-20T16:49:05.670 に答える