帶邊距的元素：自動重疊浮動元素，解決方案？

我有一個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的邊距，以便爲任何給定頁面正確定位。

來源

2012-05-17 nHaskins

更新答案使用jQuery：

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

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

原來的答案：

最簡單的解決辦法，我能想出是把你的浮動權股利外你的內容，然後給你的內容t margin等於浮動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-18 13:25:22 MetalFrog

該解決方案是有效的，但它不會爲我工作。 '＃content'是我的主要文章，我會將它削減一半。我想要一些可以讓'＃right'具有任意寬度的東西，'＃left'將以剩餘寬度爲中心，並且文本將在'＃left'下方清除，並在'＃right'周圍流動。 – nHaskins

問題在於你想要的'＃left' div * *在*＃中居中。我不認爲沒有JavaScript就沒有辦法做到這一點。下面是一個使用jQuery的小提琴：http://jsfiddle.net/zjZth/8/ – MetalFrog

我想避開JavaScript，純粹是出於情感的原因，但我會考慮一下。它確實做我想要的。 – nHaskins

浮動的問題在於，它將正常內容流中的元素取出來，它只是漂浮在那裏，並不能很好地與其他元素坐在一起。您可能只需將其用作內聯元素或使用clear:both即可。

來源

2012-05-18 13:21:00 PL3X

帶邊距的元素：自動重疊浮動元素，解決方案？

回答

相關問題