带边距的元素：自动重叠浮动元素，解决方案？

Question

我有一个 div，在我希望在我的内容区域居中的大多数页面上，我通过“margin:5px auto;”来实现。

在特定页面上，我想将图像和标题放在右侧（例如 <div><img /><cite></cite></div>），并将我的原始 div 放在剩余空间的中心。当我将新 div 设置为 float:right; 时，它只会与我原来的 div 重叠。

解决这个问题的最佳方法是什么，这样我的原始 div 可以在大多数页面上居中，但如果我在它旁边放置一个元素，则调整到侧面？ （或者我可以使用表格或内联样式:(

我在这里有一个 jsfiddle http://jsfiddle.net/nhaskins/zjZth/

谢谢。

编辑

为了澄清，我希望#right 具有任意宽度，#left 将在剩余宽度居中，文本将在#left 下方清除并在#right 周围流动。 如果我找不到解决方案，我的后备方案是使用内联样式覆盖 #left 的边距，以便为任何给定页面正确定位它。

Answer 1

浮动的问题在于它会将那个元素从正常的内容流中取出，它只是浮​​动在那里并且不能与其他元素配合得很好。您可能只需将其用作内联元素或使用clear:both。

Answer 2

使用 jQuery 更新答案：

http://jsfiddle.net/zjZth/8/

$(document).ready(function(){
    var margin = (($('#content').width() - $('#right').width()) - $('#left').width() ) / 2;
    $('#left').css('margin-left', margin + 'px');
});

---

原答案：

我能想出的最简单的解决方案是将您的浮动右侧 div 放在您的内容之外，然后为您的内容提供与浮动 div 宽度相等的右边距。

更新小提琴：http://jsfiddle.net/zjZth/6/

HTML：

<div id="right"></div> 
<div id="content">
<div id="left"></div>
<p>Lorem ipsum etc. etc. hkf uhuhek jfhksd jhgklh wgeluih e d shd ed k uhue f vgkdgku  e fudu ghf ugefkiu gek fwioeugf i ghdsi gusdui djhfk uhuhek jfhksd jhgklh wgeluih e d shd ed k uhue f vgkdgku  e fudu ghf ugefkiu gek fwioeugf i ghdsi gusdui djhfk uhuhek jfhksd jhgklh wgeluih e d shd ed k uhue f vgkdgku  e fudu ghf ugefkiu gek fwioeugf i ghdsi gusdui djhfk</p>
</div>

对于 CSS：

#content {
    padding: 5px; 
    margin-right:200px;
}

#right {
    background: rgba(0,0,255,0.8);
    float: right;
    width: 200px;
    height: 200px;
    margin: 5px;
}

#left {
    background: red;
    margin: 5px auto;
    width: 200px;
    height: 120px;
}