Question

我有一个动态生成的内容页面（通过jQuery），我需要以某种方式设置样式。我基本上是从外部来源绘制信息并将其排列在页面上的无序列表中。每个列表中都有不同数量的项目，我试图最大限度地减少列表周围的空白，如果有些空白明显短于其他列表。

在小提琴中，您将看到一个包含6个元素的列，一个包含四个元素，另一个包含两个元素。我希望有两个的一个垂直堆叠一个在另一个的顶部，所以它基本上保持与页面上其他元素相同的高度。

我玩float和clear，但我尝试的所有内容似乎只是将项目移到下一行。

HTML是：

<div id="columns">
<ul class="category_display" title="column1">
    <li><h3>Column 1</h3></li>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
</ul>
<ul class="category_display" title="column2">
    <li><h3>Column 2</h3></li>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
</ul>
<ul class="category_display" title="column3">
    <li><h3>Column 3</h3></li>
    <li>Test 1</li>
    <li>Test 2</li>
</ul>
<ul class="category_display" title="column4">
    <li><h3>Column 4</h3></li>
    <li>Test 1</li>
    <li>Test 2</li>
</ul>

我正在使用的CSS是：

#columns ul{
    list-style-type:none;
    margin:0px;
    float:left;
    width:175px;
    padding:5px 10px;
}

我在这里把它设置在一个小提琴上。

http://jsfiddle.net/6c669/

我假设有一个简单的CSS规则，我可以用它来包装某种方式，但似乎无法找到它。我在CSS3中看过“专栏”，但希望有一个更适合浏览器的解决方案。谢谢你的帮助！

Answer 1

这个功能可以做你想做的事：

<强> HTML：

<div id="columns">
<ul class="category_display floating" title="column1">
    <li><h3>Column 1</h3></li>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
</ul>
<ul class="category_display floating" title="column2">
    <li><h3>Column 2</h3></li>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
</ul>
<ul class="category_display floating" title="column3">
    <li><h3>Column 3</h3></li>
    <li>Test 1</li>
    <li>Test 2</li>
</ul>
<ul class="category_display floating" title="column4">
    <li><h3>Column 4</h3></li>
    <li>Test 1</li>
    <li>Test 2</li>
</ul>

<强> CSS：

#columns ul, .left {
    list-style-type:none;
    margin:0px;
    width:175px;
    padding:5px 10px;
}
.floating, .left {
    float:left;
}
.too_small {
    float:none;
}

<强> JS：

var group_together = '';
var count_el = 0;

$("ul").each(function () {
    if ($(this).find('li').length == 3) {
        $(this).removeClass('floating').addClass('too_small');
        count_el++;
        if (count_el == 2) {
            count_el = 0;
            $(".too_small").wrapAll('<div class="left"></div>');
            $(".too_small").removeClass();
        }

    } else {
        $(".too_small").not('.floating').removeClass('too_small').addClass('floating');
    }
});

$(".too_small").wrapAll('<div class="left"></div>');

<强> DEMO

注意

2

if (count_el == 2) {表示最多可以叠加2个元素。如果你愿意，可以改变它。

Answer 2

如果您在第4列添加另一个类并为#columns设置宽度是解决此问题的一种方法：

CSS：

#columns {
    width: 585px;
}

#columns ul.right {
    float: right;
}

HTML：

<ul class="category_display right" title="column4">
    <li>
        <h3>
        Column 4
        </h3>
    </li>
    <li>Test 1</li>
    <li>Test 2</li>
</ul>

您还可以看到更新的小提琴：

http://jsfiddle.net/6c669/3/

Answer 3

你可以使用css-columns并使用column-break-before属性（取决于浏览器支持）

http://jsfiddle.net/6c669/4/

只需添加要强制休息的班级break

CSS

#columns ul {
    list-style-type:none;
    margin:0px;
    width:175px;
    padding:5px 10px;
}
#columns {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
}
.break {
        -moz-column-break-before: always;
        -webkit-column-break-before: always;
        column-break-before: always;
}

HTML

<div id="columns">
    <ul class="category_display" title="column1">
        <li>
            <h3>Column 1</h3>
        </li>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
        <li>Test 6</li>
    </ul>
    <ul class="category_display" title="column2">
        <li>
            <h3>Column 2</h3>
        </li>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
    <ul class="category_display break" title="column3">
        <li>
            <h3>Column 3</h3>
        </li>
        <li>Test 1</li>
        <li>Test 2</li>
    </ul>
    <ul class="category_display" title="column4">
        <li>
            <h3>Column 4</h3>
        </li>
        <li>Test 1</li>
        <li>Test 2</li>
    </ul>
</div>
<!--columns-->

Answer 4

如果您需要更多Javascript，请尝试使用Mason，http://masonry.desandro.com/。或任何其他“砖”布局脚本。

您应该能够使用以下内容进行设置（基于您的jsFiddle）。

var msnry = new Masonry( $('#columns'), {
  columnWidth: 200,
  itemSelector: '.category_display'
});

使某些浮动元素垂直堆叠（CSS）

4 个答案:

注意

CSS

HTML