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 1}}。如果我找不到解决方案，我的后备将是使用内联样式覆盖#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;
}

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

2 个答案: