0

所以我刚刚发现了 css3columns规范，并立即看到我可以使用它来“现代化”我的论坛列表，该列表使用动态生成的表格。

生成表的代码非常复杂，因为它自己决定是否将下一个数据库行的数据放入表中的新行或新列中。使用 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/

显然我做错了什么。谁能帮我确定那是什么以及为什么错了？

4

3 回答 3

0 
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>

​</p>

于 2012-12-04T08:46:48.827 回答
0

我在您的示例中发现了两个问题：

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

我尝试在 JSFiddle 中将您的 2col 类重命名为 twoCol 并添加 -webkit 和 -moz 规则，它似乎有效（此处为小提琴示例）

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

    <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;
    }​
于 2012-12-05T20:58:38.333 回答
0 
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
}
于 2012-12-05T08:34:35.233 回答