html - 如何在一个 block 中使用 css 制作两列？

Question

我想在这个 html 中有两列。我怎样才能做到？

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

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

Answer 1

一种方法是 float 一些元素:

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