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的脚本，它接受List并将它们移动到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的新增的CSS规则添加了 #mn。宽度等于每个子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！”的支持者。

如何删除li css之间的垂直间距

3 个答案: