定位元素的左側和右側的邊距：自動

我有一個設置寬度（以像素爲單位）的div，以margin: auto;爲中心。我怎樣才能將一個元素放置在這個div的左邊或右邊，其寬度可以動態調整，以使中心div的邊距變寬？定位元素的左側和右側的邊距：自動

感謝您的幫助！

編輯：詳細信息...

基本上，它是以下設置：

<div></div> 
<div style="margin:auto; width: 950px">content goes here</div> 
<div></div>

我想對中心div的左側和右側相同的背景圖像，但不同一個在中心分區。那麼，如何將左右div對齊到中心div的左側和右側，寬度可以覆蓋中心div的整個邊距。

來源

2012-11-22 skndstry

如果一個元素被動態地調整到寬不過它的父是那麼肯定它並不需要對準左邊還是右邊？ - 因爲它填補了整個家長？ – George

你能不能展示你的代碼以及詳細詢問問題，並且更好的發佈一個圖片也是你想要的結果..... –

你能解釋更多嗎？左邊或右邊的div在邊距內：auto div？張貼您的代碼.. – Dhamu

這應該是一樣的...我已經使寬度更小（以適合jsfiddle http://jsfiddle.net/Neograph734/Vb4Hm/1/）。如果你應該編輯兩個邊距左邊的。

<div style="margin:auto; width: 250px; background: red;">  
    <div id="left_sidebar" style="float: left; width: 200px; margin-left: -200px;"> 
    <div id="right_sidebar" style="float: left; width: 200px; margin-left: 450px;"> 

    </div> 
    </div> 

Content here 

</div>

更新：內容應該是浮動的div下面

來源

2012-11-22 10:11:02 Neograph734

好吧，問題是側邊欄應該填滿整個邊距，無論屏幕有多寬。然後再次，我可以將值設置爲不合理的高數字:)這可能仍然比使用JS更好。 – skndstry

好的我正在用這個，沒有js和桌子，這可能是最好的選擇。我在這個問題上花了太多時間來繼續尋找答案。謝謝！ – skndstry

如果它是唯一可以做的像這樣的背景：

<div style="background: url('path/to/image.jpg'); background-size: cover; position: absolute; left: 0; top: 0; right: 0; bottom: 0;"> 
    <div style="margin:auto; width: 950px">content goes here</div> 
</div>

它投射在背景DIV的背景。然後在裏面的div你可以指定另一個背景，將超過父div的背景。

來源

2012-11-22 09:34:54 Neograph734

感謝您的回答。麻煩的是，中心的背景圖像與背景圖像一樣，都是透明的png。如果我使用這個解決方案，兩個背景圖像將重疊。 – skndstry

這是可以做到的，但它會讓事情變得不必要的複雜，我想。你能刪除一塊背景的div嗎？像從頂部到底部添加一個白色條？或從內部div指定背景爲'background：url（'path/to/image'）#ffffff; ' – Neograph734

是的！我現在覺得自己很蠢，我沒有想到這一點（背景顏色是次要的圖像），非常感謝。讓我試試看。 – skndstry

解決方案1：

可以輕鬆地通過table解決這個問題，只要使用類似這樣的

<table width="100%"> 
    <tr> 
     <td background="your/image/url5">content...</td> 
     <td width="950" background="your/image/url">content goes here...</td> 
     <td background="your/image/url5">content...</td> 
    </tr> 
</table>

你可以使用全部三個區塊寫作合作ntent，也有不同的內容

解決方案2：

如果您需要div，那麼你需要編寫小的jQuery這個

HTML：

<div class="left"></div> 
<div class="center">content goes here...</div> 
<div class="right"></div>

css：

<style> 
.left{ 
    background:url(your/image); 
    float:left; 
} 
.center{ 
    background:url(your/image); 
    float:left; 
    width:950px; 
} 
.right{ 
    background:url(your/image); 
    float:left; 
} 
</style>

的jQuery：

<script type="text/javascript"> 
    var window_width = $(window).width(); // get window width 
    var total_remain = $(window).width()-950; // (-) your center div width 
    var apply_width = total_remain/2; // get remaining and divide by 2 
    $(".left").css("width","apply_width"); // appying the width to the right/left 
    $(".right").css("width","apply_width"); // appying the width to the right/left 
</script>

來源

2012-11-22 10:18:41 Dhamu

感謝您花時間回答。然而，使用表格或JS來處理這樣的事情是我想避免的，純粹是出於情感原因。這就是說，這些答案是有效的，可能會起作用。 – skndstry

如果我可以看到你的設計，我可以給出完美的答案......這個答案可能是一個假設... – Dhamu

定位元素的左側和右側的邊距：自動

回答

相關問題