如何刪除李CSS之間的垂直間距

Question

我有這樣的HTML代碼和風格「這只是一個例子」：

<div id="mn" style="margin-top:200px;"> 
       <div class="first">1</div> 
       <div class="second">2</div> 
       <div class="third">3</div> 
       <div class="fourth">4</div> 
      </div> 

<style type="text/css"> 
     #mn, #mn div { display:inline-block; vertical-align:middle; } 
     #mn div { width:350px; margin:5px; /* float:left Comment */ } 
     div.first { height:5px; background-color:Red; } 
     div.second { height:120px; background-color:#999 } 
     div.third { height:50px; background-color:Yellow } 
     div.fourth { height:180px; background-color:#ccc } 
    </style> 

的問題是，在左側的「黃色和紅色的」元素有一個大這些之間的空間或底部邊距。 我需要刪除這個大的邊距或間距，並在所有元素中只使用5px。

我創建了一個腳本使用jQuery是採取列表，並將其移動到一個div的，這樣的事情：

<div id="mn_left"></div> 
      <div id="mn_right"></div> 
      <div id="mn" style="margin-top:200px;"> 
       <div class="first">1</div> 
       <div class="second">2</div> 
       <div class="third">3</div> 
       <div class="fourth">4</div> 
      </div> 

$(document).ready(function() {    
      $("div", "#mn").each(function (e, value) { 
       if ($("#mn_left").height() <= $("#mn_right").height()) { 
        $("#mn_left").append(value.outerHTML); 
       } 
       else { 
        $("#mn_right").append(value.outerHTML); 
       } 
      }); 
     }); 

該腳本工作正常，但我想這樣做沒有腳本。

編輯... 我錯了，我改變了李的div ...但它是完全一樣的。在HTML看起來像這樣：

http://postimg.org/image/dh6dwdjc1/

我真正想要的是這個

http://postimg.org/image/otnkrwhep/

Answer 1

首先，這裏是你的代碼正確設置使用列表標記，既然你說這是一個列表：

HTML：

<ul id="mn"> 
    <li class="first">1</li> 
    <li class="second">2</li> 
    <li class="third">3</li> 
    <li class="fourth">4</li> 
</ul> 

CSS：

#mn {padding:0; margin:0;} 
#mn, #mn li { display:inline-block; vertical-align:middle; } 
#mn li { width:350px; margin:5px; } 
li.first { height:5px; background-color:Red; } 
li.second { height:120px; background-color:#999 } 
li.third { height:50px; background-color:Yellow } 
li.fourth { height:180px; background-color:#ccc } 

• （JSFiddle Link 1）

然後，取出margin從#mn li：

#mn li { width:350px; /* margin:5px; */ } 

• （JSFiddle Link2）

您會看到列表中的項目現在處於清除狀態，除了第一個項目，其中線條高度高於項目高度。要修復第一個問題，請列出項目overflow:hidden;並將display從inline-block更改爲block。

#mn, #mn li { display:block; vertical-align:middle; } 
#mn li { width:350px; overflow: hidden;} 

• （JSFiddle Link 3）

這應該是它適合你，除非我誤解了。

Answer 2

這個怎麼樣？使用浮動而不是絕對定位。

#mn {width: 720px;} 
#mn div { width:350px; float:left; margin:5px; } 
#mn div.second {float:right;} 
div.first { height:5px; background-color:Red; } 
div.second { height:120px; background-color:#999; } 
div.third { height:50px; background-color:Yellow } 
div.fourth { height:180px; background-color:#ccc } 

• 所有飄來到左。
• 爲包含div的 #mn添加了新的CSS規則。寬度等於每個div div的寬度加上它的邊距 ，所以(5px + 350px + 5px) = (360px x 2) = 720px。
• 爲第二個div添加了新的CSS聲明。

Answer 3

現在我明白你想要做什麼......

的一種方式做到這一點是創建一個類的項目，將在第二科拉姆：

#mn .col2 { position: absolute; left: 355px; top:0; margin-top: 0;} 

JSFiddle Example。 （PS，您需要#mn{position:relative;}爲上述工作。）

這個問題是，如果你在第二列有多個項目，你必須給第二個（和第三，第四等） ）項目定製top位置，以便他們正確排隊。

這似乎是一個使用Javascript而不是CSS的理想場所。這是來自支持者「隨時可以使用CSS！」