如何删除李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！”