html - 多列 CSS 使第一列更宽

Question

我正在使用多列 div。请参阅下面的 CSS:

<div id="content">
    Super duper long text....
</div>

#content {
    -webkit-column-width: 300px!IMPORTANT; 
    -moz-column-width: 300px!IMPORTANT;
    column-width: 300px!IMPORTANT;
}

它工作得很好。我所有的专栏都是 300px。有没有办法使用 css 使第一列为 500px？

Answer 1

要使第一列变宽，请使用此代码:

=> CSS

    .div_style:first-child
{
    border:1px solid black;
    width: 500px;
}
.div_style
{
    border:1px solid black;
    width: 300px;
}

=> HTML

 <div id="content_first" class="div_style">
    Super duper long text....
</div>
<div id="content" class="div_style" >
    Super duper long text....
</div>
<div id="content" class="div_style" >
    Super duper long text....
</div>