Есть ли способ указать разную ширину для столбцов в CSS3? - PullRequest
Новая
       8

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

15 голосов
/ 16 марта 2010

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

Ответы [ 3 ]

13 голосов
/ 16 марта 2010

Нет, пути нет.

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

10 голосов
/ 20 марта 2015

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

1 голос
/ 19 января 2019

Вы можете использовать свойство сетки : 

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