如何在一個塊中用css製作兩個colums？

我想用這個html有兩列。我怎麼做到的？如何在一個塊中用css製作兩個colums？

<div class="main-box"> 
 
\t <div class="col_1">Column 1</div> 
 
\t <div class="col_1">Column 1</div> 
 
\t <div class="col_1">Column 1</div> 
 
\t <div class="col_2">Column 2</div> 
 
\t <div class="col_2">Column 2</div> 
 
\t <div class="col_2">Column 2</div> 
 
</div>

不幸的是，我不能讓兩個div並把每個col_n到correspoinding列。我的html是由drupal生成的，我不知道如何以其他方式生成它。

來源

2017-06-13 Andy Core

當然你的問題應該問如何修改HTML？ – BenM

'.main-box {column-count：2;}'不適用於您的HTML嗎？ – bleistift2

Css肯定是可編輯的。但我所擁有的不是一個文本，因此列數不適用於我。 –

一種方法是浮動的一些內容：

.col_1 { 
 
    float: left; 
 
    clear: left; 
 
}

<div class="main-box"> 
 
    <div class="col_1">Column 1</div> 
 
    <div class="col_1">Column 1</div> 
 
    <div class="col_1">Column 1</div> 
 
    <div class="col_2">Column 2</div> 
 
    <div class="col_2">Column 2</div> 
 
    <div class="col_2">Column 2</div> 
 
</div>

來源

2017-06-13 14:48:40 j08691

如何在一個塊中用css製作兩個colums？

回答

相關問題