居中一个<div>并将另一个向右浮动

Question

可能重复：

居中一个div，同时将另一个div浮动到右侧？
Centering one div while another div is floated to the right?

我正在尝试将container1居中，并将container2浮动到其右侧，使其略微溢出页面：

示例：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;
}

- hplodnarmas

Answer 1

将两个 div 放到另一个 div 里面并使 container1 和 container2 的 display 属性为 inline-block。

就像这样。

<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>

尝试这个代码片段

- user10

---

如果您想得到准确的答案，请不要乱动 - user10

这只是将 container1 完全向左推，而 container1 仍然摆在一个奇怪的位置，靠近底部（但奇怪的是不在 container1 下面）。 - hplodnarmas

如何将“float container2到其右侧，使其略微溢出页面？” - jimp

当然，与float相比，我更喜欢inline-block，但如果必须支持IE8或更低版本，则会出现问题。不幸的是，这些浏览器不支持inline-block。 - Jared Farrish

没错!! 我通常会在最新的浏览器中尝试所有东西。这可能是问题所在。 - user10

这个答案在IE7中运行良好。 - user10

Answer 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示例。

如果你不想要container1的绝对定位，只需将top: 0;添加到container2即可。

- rlay3

---

这个程序正常工作了！谢谢你！我向你送去拥抱。 - hplodnarmas

Answer 3

首先，您需要在标记中将#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;
}

- jimp