如何在一个块中用css制作两个列？

Question

我希望这个html有两列。我该怎么做？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

不幸的是，我不能制作两个div并将每个col_n放入correspoinding列。我的html是由drupal生成的，我不知道如何以其他方式生成它。

Answer 1

一种方法是浮动一些元素：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;