7

重複の可能性：
1つのdivを中央に配置し、別のdivを右にフロートさせますか？

container1とfloatcontainer2を中央に配置して、ページからわずかに流れ出るようにしようとしています。

例： http： //i.imgur.com/JHkfn.jpg

残念ながら、container2はcontainer1の右下をホッピングしています。これは、サイトのモックアップ（右下のリンク）で確認できます。

サイトモックアップ： http ：//ad313.samrandolphdesign.com/

CSS：

#container1 {
    margin: auto;
    background-color: #FFF;
    width: 80%;
    height: 100%;
    max-width: 600px;
    padding-bottom: 15px;
    display: block;
}

#container2 {
    background-color: #CC9900;
    max-width: 600px;
    width: 80%;
    height: 100%;
    padding-top: 60px;
    padding-bottom: 50px;
    text-align: center;
    float: right;
    display: block;
}
4

3 に答える 3

2

2 つの div を別の div 内にラップします。コンテナ 1 とコンテナ 2 の表示をインライン ブロックにします。

このようなもの。

<div style="width: 2000px">
  <div id="container1" style="width: 990px; display: inline-block">
  </div>
  <div id="container2" style="width: 990px; display: inline-block">
  </div>
</div>

このフィドルを試してください

于 2012-10-19T04:23:12.717 に答える
2

フローティングの代わりに絶対配置を使用してみてください。

何かのようなもの：

#container1 {
    margin: auto;
    background-color: red;
    width: 50%;
    height: 100%;
    max-width: 600px;
    padding-bottom: 15px;
    text-align: center;
    display: block;
    position: absolute;
    left: 25%;
}

#container2 {
    background-color: #CC9900;
    max-width: 600px;
    width: 50%;
    height: 100%;
    padding-top: 60px;
    padding-bottom: 50px;
    text-align: center;
    display: block;
    position: absolute;
    right: -25%;
}​

ここにjsfiddle EDITがあります：container1の絶対配置が必要ない場合は、container2に追加top: 0;するだけです

于 2012-10-19T04:24:14.087 に答える
0

最初に、マークアップを#container2上に移動#container1して、フローティング トップが後では#container1なく上になるようにする必要があります。次に、#container2画面外に移動するには、負の margin-right を指定する必要があります。

#container2 {
background-color: #CC9900;
max-width: 600px;
width: 80%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
float: right;
display: inline-block;
margin-right: -300px;
}
于 2012-10-19T04:26:59.390 に答える