0

我有这个 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);
                }
            });
        });

该脚本工作正常，但我想在没有脚本的情况下进行。

编辑... 我弄错了，我将 li 更改为 div... 但它完全一样。Html 看起来像这样：

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

我真正想要的是这个

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

4

3 回答 3

0

首先，这是您使用列表标记正确设置的代码，因为您说它是一个列表：

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 }

然后，删除marginfrom #mn li：

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

您将看到列表项现在是齐平的，除了第一个项目，其中行高高于项目高度。要解决第一个问题，请给列表项 anoverflow:hidden;并将displayfrom更改inline-block为 just block。

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

那应该是给你的，除非我误解了。

于 2013-07-03T18:56:17.867 回答
0

这个怎么样？使用浮动而不是绝对定位。

#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 }
  • 全部向左浮动。
  • 添加了一个新的 CSS 规则来包含div. #mn宽度等于每个子 div 的宽度加上它的边距，所以( 5px + 350px + 5px ) = ( 360px x 2 ) = 720px.
  • 为第二个 div 添加了新的 CSS 声明。
于 2013-07-03T18:59:06.033 回答
0

现在我明白了你想要做什么......

一种方法是为将在第二列中的项目创建一个类：

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

JSFiddle 示例。（PS，你需要#mn{position:relative;}上述工作。）

这样做的问题是，如果您在第二列中有多个项目，则必须为第二（以及第三、第四等）项目提供自定义top位置，以便它们正确排列。

这似乎是使用 Javascript 而不是 CSS 的理想场所。这来自“尽可能始终使用 CSS”的支持者！

于 2013-07-03T21:08:40.463 回答