1

我有一个 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用内联样式覆盖边距，以便为任何给定页面正确定位它。

4

2 回答 2

1

浮动的问题在于，它将该元素从正常的内容流中取出，它只是漂浮在那里，与其他元素不相配。您可能只需将其用作内联元素或使用clear:both.

于 2012-05-18T13:21:00.503 回答
0

使用 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;
}
于 2012-05-18T13:25:22.293 回答