Лучший способ сделать столбцы в HTML/CSS

Я ищу способ отображения 3 столбцов контента. Я нашел способ отображения столбцов обхода, но я не хочу этого для этой страницы. Я ищу способ сказать

<column>
<!-- content -->
</column>

3 раза, и 3 столбца отображаются рядом друг с другом. Лучший пример, который я использовал, - The Verge (http://www.theverge.com/). Каков наилучший способ сделать это?

Ответ 1

Я предлагаю вам либо использовать <table>, либо CSS.

Предпочтительно, чтобы CSS был более гибким. Примером может служить:

<!-- of course, you should move the inline CSS style to your stylesheet -->
<!-- main container, width = 70% of page, centered -->
<div id="contentBox" style="margin:0px auto; width:70%">

 <!-- columns divs, float left, no margin so there is no space between column, width=1/3 -->
    <div id="column1" style="float:left; margin:0; width:33%;">
     CONTENT
    </div>

    <div id="column2" style="float:left; margin:0;width:33%;">
     CONTENT
    </div>

    <div id="column3" style="float:left; margin:0;width:33%">
     CONTENT
    </div>
</div>

jsFiddle: http://jsfiddle.net/ndhqM/

Использование float: left сделало бы 3 столбца друг на друга, входя в левую часть в центре div div.

Ответ 2

Вероятно, вам стоит использовать css3 для этого, хотя он включает использование префиксов поставщиков.

Я вывел быстрый fiddle для демонстрации, но суть в этом.

<style>
.3col
{
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count:3;
    column-gap:10px;
}
</style>
<div class="3col">
<p>col1</p>
<p>col2</p>
<p>col3</p>
</div>

Ответ 3

В дополнение к 3 плавающей структуре столбцов (которые я бы предложил также), вы должны вставить clearfix, чтобы предотвратить layoutproblems с элементами после columncontainer (держите столбец контейнера в потоке, так сказать...).

<div id="contentBox" class="clearfix">
....
</div>

CSS

.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

Ответ 4

Вы также можете попробовать.

.col{
  float: left;
}
.col + .col{
  float: left;
  margin-left: 20px;
}

/* or */

.col:not(:nth-child(1)){
  float:left;
  margin-left: 20px;
}

<div class="row">
  <div class="col">column</div>
  <div class="col">column</div>
  <div class="col">column</div>
</div>

Ответ 5

Bootstrap. Проверьте их удивительную сетку здесь.

Используя Bootstrap, вы можете сделать три столбца следующим образом:

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>