保證金沒有被應用

我有以下的HTML代碼：保證金沒有被應用

<div class = "content_wrapper"> 
    <div class = "left_side"> 
     LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
    </div> 
    <div class = "right_side"> 
     RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
    </div> 
    <div class = "bottom"> 
     bottom content 
    </div> 
</div>

下面的CSS：

#content_wrapper 
{ 
    width: 960px; 
    margin: 0 auto; 
} 

div.left_side{margin:0px; width:100px; padding:0px 0 0 5px; float:left;} 
div.right_side{margin:0px; width:100px; padding:0px 0 0 5px; float:right;} 
div.bottom {clear:both; margin-top:20px;}

及以下問題：

我怎樣才能使底部div與內容包裝容器有一定的差距？

您可以看到它生活here，該保證金沒有被應用。

來源

2012-05-04 Hommer Smith

改變HTML到：

<div class = "content_wrapper"> 
    <div class = "left_side"> 
     LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
    </div> 
    <div class = "right_side"> 
     RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
    </div> 
    <div style="clear:both;" /> 
    <div class = "bottom"> 
     bottom content 
    </div> 
</div>

和CSS爲：

#content_wrapper 
{ 
    width: 960px; 
    margin: 0 auto; 
} 

div.left_side{margin:0px; width:100px; padding:0px 0 0 5px; float:left;} 
div.right_side{margin:0px; width:100px; padding:0px 0 0 5px; float:right;} 
div.bottom {margin-top:20px;}

參見：http://jsfiddle.net/L8YN6/11/有關使用填充機上，而不是邊距

來源

2012-05-04 20:11:22

我不能做到這一點只用CSS，而不是增加一個新的HTML元素？ –

是的，你可以刪除額外的HTML元素，如果你想.. –

什麼？它會將div 20px的內容推到底部：

div.bottom {clear：both;填充頂：20像素;}

來源

2012-05-04 20:13:43

我將採取不同的處理這一點，用一個單獨的可重複使用的，但「清理」的元素：http://jsfiddle.net/L8YN6/16/

<div class = "content_wrapper"> 
    <div class = "left_side"> 
     LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
    </div> 
    <div class = "right_side"> 
     RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
    </div> 
    <div class="clearing">&nbsp;</div> 
    <div class = "bottom"> 
     bottom content 
    </div> 
</div>

而CSS變爲：

#content_wrapper { 
    width: 960px; 
    margin: 0 auto; 
} 

div.left_side {margin:0px; width:100px; padding:0px 0 0 5px; float:left;} 
div.right_side {margin:0px; width:100px; padding:0px 0 0 5px; float:right;} 
div.clearing { clear: both; line-height: 0; font-size: 0; overflow: hidden; } 
div.bottom { margin-top: 20px }

我更喜歡用這種方法來解決不同瀏覽器對CSS的「float」規範的解釋。或者，您可以採用self-clearing floats方法。

來源

2012-05-04 20:14:04

感謝您的答案。通過這樣做，我們是不是打破了內容與樣式的分離？我的意思是，這個元素僅僅是爲了造型而已？ –

@HommerSmith：是的，這只是造型。這是醜陋的和侵入性的，但它確實是它應該的，我更喜歡它與CSS浮動摔跤。 –

如果你打算採用這種方法，你可以添加「div.right_side + div.bottom {clear：both;}」，並用nbsp及其相關的div.clearing css來擺脫div。 – 2012-05-04 22:17:23

如果您將float:left添加到div.bottom，則邊距將起作用。如果你不想使用float，padding-top {20px）將像Koby提到的那樣工作。

而且在你的HTML你有<div class="contentWrapper">但在你的CSS #content_wrapper ..改變，要.content_wrapper {

來源

2012-05-04 20:40:24 Sammy

保證金沒有被應用

回答

相關問題