Meilleure façon de faire des colonnes en HTML/CSS

Question

Je cherche un moyen d'afficher 3 colonnes de contenu. J'ai trouvé un moyen d'afficher des colonnes de bouclage, mais je ne veux pas de cela pour cette page. je cherche un moyen de dire

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

3 fois et afficher 3 colonnes l'une à côté de l'autre. Le meilleur exemple que j'ai est The Verge (http://www.theverge.com/). Quelle est la meilleure façon de procéder?

Answer 1

Je vous suggère d'utiliser soit <table> ou CSS.

CSS est préféré pour être plus flexible. Un exemple serait :

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

L'utilisation de float:left ferait coller 3 colonnes les unes aux autres, venant de la gauche à l'intérieur de la "zone de contenu" div centrée.

Answer 2

Vous devriez probablement envisager d'utiliser css3 pour cela, bien qu'il inclue l'utilisation de préfixes de fournisseur.

J'ai mis un violon rapide à la démo, mais le point crucial est le suivant.

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

Answer 3

En plus de la structure à 3 colonnes flottantes (que je suggérerais également), vous devez insérer un clearfix pour éviter les problèmes de mise en page avec les éléments après le columncontainer (garder le columncontainer dans le flux, pour ainsi dire...).

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

Answer 4

Vous pouvez également essayer.

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

réf : http://codepen.io/co0kie/pen/gPKNWX?editors=1100

Answer 5

Je voulais vous donner plus d'options :

 http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
 http://welcome.totheinter.net/columnizer-jquery-plugin/