将一个 div 居中，而另一个 div 向右浮动？答案

【问题标题】：Centering one div while another div is floated to the right?将一个 div 居中，而另一个 div 向右浮动？
【发布时间】：2011-06-03 14:13:33
【问题描述】：

这是我的例子：

<div id="mainContainer">
     <div id="itemIWantToCenter"></div>
     <div id="itemIwantFloatedRight"></div>
</div>

mainContainerwidth 宽度设置为 100%。 itemIwantFloatedRight 宽度设置为 300 像素。假设itemIWantToCenter 的宽度为 200px。我将如何使该 div 居中，同时在容器中浮动另一个？谢谢！

【问题讨论】：

标签： css positioning

【解决方案1】：

这是我的解决方案的fiddle，代码如下（固定链接）

这种方案的优点是，当父容器的大小发生变化时，内容容器会扩展，同时保留它的边距，右侧边栏将始终保持在右侧。

希望这会有所帮助。

注意在小提琴中，content 容器有点苗条。这是由于窗口的大小。更改窗口的大小 {将鼠标悬停在分隔线上，单击并拖动}，以查看好处。

<div class="container">
    <div class="content">
        centered content
    </div>
    <div class="right">
        right
    <div>
</div>

.container {
    width:100%;
    position:relative;
}

.container .content {
    width:auto;
    margin:0 200px;
    background:green;
}

.container .right {
    width:200px;
    position:absolute;
    top:0px;
    right:0px;   
    background:#f00;
}

.content, .right {
    height:300px   
}

【讨论】：

【解决方案2】：

希望这会有所帮助：

<div id="mainContainer">
    <div id="itemIWantToCenter" style="float: right;"></div>
    <div id="itemIwantFloatedRight" style="margin-left: 50%;"></div>
</div>

【讨论】：

【解决方案3】：

你当然应该使用链接样式表...

<div id="mainContainer" style="width:100%; border:solid 1px red;">
  <div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right">
     right
  </div>
  <div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;">
     center
  </div>
</div>

【讨论】：

这只会在少数情况下起作用；取决于屏幕尺寸和居中的容器尺寸。真的很好奇这是什么场景的解决方案。
在这种情况下，屏幕尺寸可以缩小到 700px，然后中间和右侧 div 会重叠。由于大多数网站都比那更宽，所以这应该不是问题。我只希望@DDiVita 的情况没问题:)