不要根据旁边的元素拉伸元素的高度答案

【问题标题】：Don't stretch element's height based on the one next to it不要根据旁边的元素拉伸元素的高度
【发布时间】：2015-06-22 13:37:00
【问题描述】：

所以我有这个列表，其中包含浮动列表项，宽度等于 50%。它们都是动态生成的，有些 li 的高度比 wrest 更大，而它旁边的那个会延伸到那个高度，看起来有点奇怪。而且我不希望它伸展。这是我的代码：

HTML

<ul>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
        <ul>
            <li><strong>More options</strong></li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3 </li>
        </ul>
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
</ul>

CSS

ul > li {
    float: left;
    width: 50%;
}

ul > li li {
    width: 100%;
    float: none;
}

JSFiddle -> https://jsfiddle.net/y160n4hg/

【问题讨论】：

您必须为此更改 DOM
那么你需要将你的

标签： html css height width

【解决方案1】：

试试这样：Demo

CSS：

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    /*  -moz-column-fill: auto;*/
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
}
ul.one {
    list-style: none;
    margin:0;
    padding:0;
}
ul.one >li {  
    background:green;
    display:inline-block;
    width:100%;
    vertical-align:top;
}
ul.one li li {
    width: 100%;
    float: none;
    background:yellow;
}

ul.one li > ul >li {
    color: red;
    width: 100%;
    float: none;
}

HTML：

<div id="container"> <ul class="one">..</ul></div>

【讨论】：

【解决方案2】：

您可以为 LI 元素设置 max-height 并设置 overflow auto 以获得滚动条来滚动值。

ul > li {
    float: left;
    width: 50%;
    max-height: 70px;
    overflow: auto;
}

ul > li li {
    width: 100%;
    float: none;
}

<ul>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
        <ul>
            <li><strong>More options</strong></li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3 </li>
        </ul>
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
</ul>

https://jsfiddle.net/y160n4hg/3/

【讨论】：

【解决方案3】：

试试这个

HTML

<ul>
    <li><span>Some Label 1-1</span> Some text</li>
    <li><span>Some Label 1-2</span> Some text</li>
</ul>

<ul>
    <li> <span>Some Label 2-1</span> Some text
        <br> <strong>More Options</strong>

        <ul>
            <li>Some More Text</li>
        </ul>
    </li>
    <li><span>Some Label 2-2</span> Some text</li>
</ul>

CSS

ul {    
    float:left;
}
li ul {
    float:none;
}

Fiddle Demo

【讨论】：

【解决方案4】：

看看这个修改后的版本：https://jsfiddle.net/scarl3tt/y160n4hg/1/

我添加了这段代码来证明列表项实际上并没有拉伸 - 它们只是向下浮动。

ul > li {
    ...
    background: red;
}

Float 不会自动将事物推到尽可能高的高度。有一些 javascript 库可以为您压缩类似的内容，尽管它们非常糟糕。 Masonry 是最受欢迎的之一。

【讨论】：