Есть ли способ указать разные ширины для столбцов в CSS3?

Я хотел бы использовать 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>

есть ли способ дать одному столбцу ширину 20px и одному столбцу ширину, скажем, 80px?

12
css css-multicolumn-layout css3

2 ответов

нет, это невозможно.

функция предназначена для содержимого, которое течет между равными столбцами.

9

технически это невозможно сделать с помощью свойство нескольких столбцов только, но для макета в 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

8