Question

所以我刚刚发现了css3 columns规范，并立即看到我可以使用它来“现代化”my forum listing使用动态生成的表。

生成表的代码非常复杂，因为它确定自己是否将下一个数据库行的数据放入表中的新行或新列中。使用css3列的方式，我假设我可以简单地让代码将数据读入页面并留下css3来决定什么应该进入哪一列。

虽然我遇到了一些问题。使用它时，内容不会在指定的列数中分割。

以下是一些供参考的代码：

.2col {
    column-count: 2;
    column-width: 400px;
    column-gap: 10px;
    column-rule: 1px solid #e1e1e1;
}


<div class="cats 2col">
    <div class="title">
        <div class="t">
            <h2><a href="#" class="sh" id="t1">-</a> Title 1</h2>
        </div>

        <section>
            <div class="cat">
                <p>Category 1<span>This is the first category</p>
            </div>

            <div class="cat">
                <p>Category 2<span>This is the second category</p>
            </div>

            <div class="cat">
                <p>Category 3<span>This is the third category</p>
            </div>
        </section>
    </div>

    <div class="title">
        <div class="t">
            <h2><a href="#" class="sh" id="t1">-</a> Title 2</h2>
        </div>

        <section>
            <div class="cat">
                <p>Category 1<span>This is the first category</p>
            </div>

            <div class="cat">
                <p>Category 2<span>This is the second category</p>
            </div>
        </section>
    </div>
</div>

我设置了这个jsfiddle进行测试：http://jsfiddle.net/LYoung/JLVEs/1/

显然我做错了什么。任何人都可以帮我确定那是什么以及为什么这是错的？

提前致谢！

Answer 1

section {
    position: relative;
    width: 450px;
    border:1px solid red;
    display:block;
}

dl.2col {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;

    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;

    column-rule: 1px solid #e1e1e1;
}

dl.2col dd {
     -moz-column-width: 200px;
     -webkit-column-width: 200px;
     column-width: 200px; 
     display:inline-block ! important;
    float:none;
}

<section>
<dl class="cats title 2col">
    <dd class="t"><h2><a href="#" class="sh" id="t1">-</a> Title 1</h2></dd>

    <dd class="cat">Category 1<span>This is the first category</span></dd>

    <dd class="cat">Category 2<span>This is the second category</span></dd>

    <dd class="cat">Category 3<span>This is the third category</span></dd>

    <dd class="t"><h2><a href="#" class="sh" id="t1">-</a> Title 2</h2></dd>

    <dd class="cat">Category 1<span>This is the first category</span></dd>

    <dd class="cat">Category 2<span>This is the second category</span></dd>
</dl>
</section>

Answer 2

section dl.directory {
    margin-left:1em;
    margin-bottom:7px;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
    -moz-column-gap:7px;
    -webkit-column-gap:7px;
    column-gap:7px;
    -moz-column-rule:1px solid #D0D2D3;
    -webkit-column-rule:1px solid #D0D2D3;
    column-rule:1px solid #D0D2D3;
}

section dl.directory dd {
    display:inline-block;
    -moz-column-width:225px;
    -webkit-column-width:225px;
    column-width:225px;
    margin:0 5px;
    padding:5px 0;
    border-bottom:1px solid #D0D2D3;
}

section dl.directory dd em {
    font styling here
}

Answer 3

我在你的例子中发现了两个问题：

首先是-webkit和-moz规则
您班级的2col名称

我尝试在JSFiddle中为twoCol重命名你的2col类并添加-webkit和-moz规则，它似乎有效（Fiddle Example here）

样式仍有一些问题，但当窗口足够大时，它会将内容分成两列

    <div class="cats twoCol">
    <div class="title">
        <div class="t">
            <h2><a href="#" class="sh" id="t1">-</a> Title 1</h2>
        </div>

        <section>
            <div class="cat">
                <p>Category 1<span>This is the first category</p>
            </div>

            <div class="cat">
                <p>Category 2<span>This is the second category</p>
            </div>

            <div class="cat">
                <p>Category 3<span>This is the third category</p>
            </div>
        </section>
    </div>

    <div class="title">
        <div class="t">
            <h2><a href="#" class="sh" id="t1">-</a> Title 2</h2>
        </div>

        <section>
            <div class="cat">
                <p>Category 1<span>This is the first category</p>
            </div>

            <div class="cat">
                <p>Category 2<span>This is the second category</p>
            </div>
        </section>
    </div>
</div>

                body {
        background: #000;
    }
    .title {
        padding-bottom: 10px;
    }
.twoCol {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-width: 400px;
    -moz-column-width: 400px;
    column-width: 400px;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    -webkit-column-rule: 1px solid #e1e1e1;
    -moz-column-rule: 1px solid #e1e1e1;
    column-rule: 1px solid #e1e1e1;
}
    h2 {
        font-weight: bold;
        font-size: 20px;
        color: #bede06;
    }
    .t {
        width: 800px;
        column-span: all;
    }
    .t a {
        color: #bede06;
        text-decoration: none;
        font-size: 22px;
    }
    t:after {
        content: '';
        display: table;
    }
    .cat {
        color: #000;
        font-size: 18px;
        border-radius: 5px;
        box-shadow: 0 0 2px #b6bcc6;
        text-shadow: 2px 2px #fff;
        background-image: linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);
        background-image: -o-linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);
        background-image: -moz-linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);
        background-image: -webkit-linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);
        background-image: -ms-linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.37, rgb(225,225,225)),
            color-stop(0.69, rgb(255,255,255))
    );
    }
    .cat {
        width: 400px;
        height: 50px;
        margin: 0 0 10px 10px;
        padding-left: 5px;
    }
    .cat span {
        display: block;
        font-style: italic;
        font-size: 14px;
    }

CSS3包含div和section的多列

3 个答案: