CSS3有没有一种方法可以为列指定不同的宽度？

Question

我想使用CSS实现一个两栏布局。我正在使用的标记是这个：

<div style="-webkit-column-count: 2;
            -webkit-column-rule: 1px solid black;
            -webkit-column-width: 80px;
             margin-left:20px;margin-top:20px;">
    <div id="picturebox" style="">picture box</div>
    <div id="nme">name</div>
</div>

有没有一种方法可以让一个列的宽度为20像素，另一个列的宽度为80像素？

- Joe Morris

Answer 1

不，没有办法。

该功能是设计用于在等宽列之间流动的内容。

- Quentin

Answer 2

从技术上讲，仅使用多列属性无法实现该目标，但对于双列布局，您可以通过在其中一侧设置负margin来实现。

div {
    width: 400px;
    background-color: lightgreen;
}

ul {
    -moz-columns: 2 auto;
    -webkit-columns: 2 auto;
    columns: 2 auto;
    -moz-column-gap: 80px;
    -webkit-column-gap: 80px;
    column-gap: 80px;
    margin-right: -80px;
}

<div>
    <ul>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem</li>
        <li>Lorem</li>
        <li>Lorem</li>
        <li>Lorem</li>
    </ul>
</div>

查看 JSFiddle 演示

- Oriol

---

所以，根据上述好主意背后的逻辑，您也可以使用三列布局来实现这一点。 - sarimarton

Answer 3

你可以使用 网格属性 来实现：

.container-grid {
  display: grid;
  grid-template-columns: 20px 50px; /*columns widths*/
  height: 40vh;
}

.col-1 {
  background-color: blue;
}

.col-2 {
  background-color: green;
}

<div class="container-grid">
  <div class="col col-1"></div>
  <div class="col col-2"></div>
</div>

- Susana Sanz

---

网格无法将子元素分成多列。每个元素始终会整体位于其中一列中。 - loop