定位包裝元素內的兩個元素

我有幾個問題試圖定位兩個div，並排，在一個包裝div，一個左對齊，另一個右對齊。定位包裝元素內的兩個元素

這裏是我的代碼：

<div class="member_top" style="padding:15px; background:#DDD;"> 
    <div class="member_top_wrap" style="width:960px; margin:0 auto; position:relative;"> 
     <div class="member_top_left" style="display:inline-block; width:480px;">Left</div> 
     <div class="member_top_right" style="display:inline-block; width:480px;">Right</div> 
    </div> 
</div>

我嘗試添加位置相對於member_top_wrap和絕對的兩個中的元素，使用左，右位置，但隨後的15px的填充不工作。有人可以請解釋如何實現這一目標？

這是一個圖示的例子：

enter image description here

我不是尋找在如在圖中所示的兩個元件之間的填充，我添加的間隙，以限定的兩個要素。

來源

2012-02-26 TheCarver

浮起一個左邊和另一個右邊。 – j08691 2012-02-26 05:34:25

你可以簡單地浮動的div，然後清除彩車底部，

<div class="member_top" style="padding:15px; background:#DDD; width: 960px;"> 
<div class="member_top_wrap" style="margin:0 auto; position:relative;"> 
    <div class="member_top_left" style="display:inline-block; width:480px;float: left;">Left</div> 
    <div class="member_top_right" style="display:inline-block; width:480px;float: left;">Right</div> 
    <div style="clear: both;"></div> 
</div> 
</div>

Demo here

作爲一個側面說明...你真的不想用內聯樣式要做到這一點。樣式表效率更高。

來源

2012-02-26 05:35:09 Scott

謝謝，我確實在外部樣式表中寫了我的CSS。由於我對CSS佈局不熟悉，因此不再使用表格，我傾向於使用內聯樣式設計頁面的一部分，因爲它會更快地出錯:)當我把它正確的時候，我將樣式複製到我的外部樣式表，清理我的代碼。 – TheCarver 2012-02-26 22:47:24

檢查此鏈接 http://jsfiddle.net/bbmG6/1/

.member_top_wrap{ 
    width:960px; 
    padding:15px; 
    background:red; 
    float:left; 
} 
    .member_top_left{ 
    float:left; 
    width:480px; 
    background:yellow; 
} 
.member_top_right{ 
    float:right; 
    background:green; 
    width:480px; 
}

來源

2012-02-26 05:40:56

爲什麼要投票？（ – 2012-02-26 12:52:48

）我沒有投票表決，我不知道爲什麼有人會這樣做，當人們無法解釋原因時，它會讓我很煩惱。但是，我沒有接受你的答案，因爲你在哪裏使用float：留在.member_top_wrap上，它對.member_top及其父容器造成了一些問題。 – TheCarver 2012-02-26 22:52:06

我會將它投票回0給你，因爲你足夠善意地用演示寫出一個好答案。 – TheCarver 2012-02-26 22:52:57

-1

當使用display: inline-block，inline-block元件之間的空格變成元件之間的間隙。爲了消除這種差距，將font-size設置爲0，然後爲子元素恢復font-size（通常使用'px'值，但對於更新的瀏覽器'rem'[root em]也可以使用）。元素之間

或者刪除空白：

<div class="member_top_wrap" 
    ><div class="member_top_left"></div 
    ><div class="member_top_right"></div 
></div>

或者只是使用它的子元素display: table用於包裝和display: table-cell。

來源

2012-02-26 09:17:36

這不是我要求的，對不起，認爲你的棍棒結束了。 – TheCarver 2012-02-26 22:53:45

定位包裝元素內的兩個元素

回答

相關問題