web-dev-qa-db-fra.com

Disposition HTML simple en deux colonnes sans utiliser de tableaux

Je suis à la recherche d'une méthode extrêmement simple pour créer un format à deux colonnes permettant d'afficher des données sur une page Web. Comment puis-je obtenir le même format que:

<table>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
    </tr>
</table>

Je suis également ouvert aux techniques HTML5/CSS3.

htmlcsshtml5
60
Fixer
<style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

Assurez-vous que la somme des largeurs de colonnes est égale à la largeur d'enveloppe. Vous pouvez également utiliser des valeurs de pourcentage pour la largeur.

Pour plus d'informations sur les techniques de mise en page de base utilisant CSS, consultez ce tutorial

89
Dennis Traub

Eh bien, vous pouvez faire des tables CSS au lieu de tables HTML. Cela maintient votre code HTML sémantiquement correct, mais vous permet d'utiliser des tableaux à des fins de mise en page. 

Cela semble plus logique que d’utiliser des hacks flottants. 

<html>
  <head>
    <style>

#content-wrapper{
  display:table;
}

#content{
  display:table-row;
}

#content>div{
  display:table-cell
}

/*adding some extras for demo purposes*/
#content-wrapper{
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  position:absolute;
}
#nav{
  width:100px;
  background:yellow;
}
#body{
  background:blue;
}
</style>

  </head>
  <body>
    <div id="content-wrapper">
      <div id="content">
        <div id="nav">
          Left hand content
        </div>
        <div id="body">
          Right hand content
        </div>
      </div>
    </div>
  </body>
</html>
40
RobKohr

Je sais que cette question a déjà reçu une réponse, mais après avoir traité un peu la mise en page, je voulais ajouter une réponse alternative qui résout quelques problèmes classiques liés aux éléments flottants ...

Vous pouvez voir l'exemple mis à jour en action ici.

http://jsfiddle.net/Sohnee/EMaDB/1/

Peu importe que vous utilisiez HTML 4.01 ou HTML5 avec des éléments sémantiques (vous devrez déclarer les conteneurs gauche et droit comme étant display: block s'ils ne le sont pas déjà).

CSS

.left {
    background-color: Red;
    float: left;
    width: 50%;
}

.right {
    background-color: Aqua;
    margin-left: 50%;
}

HTML

<div class="left">
    <p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
    <ul>
        <li>The columns are in the right order semantically</li>
        <li>You don't have to float both columns</li>
        <li>You don't get any odd wrapping behaviour</li>
        <li>The columns are fluid to the available page...</li>
        <li>They don't have to be fluid to the available page - but any container!</li>
    </ul>
</div>

Il existe également un ajout plutôt soigné (bien que plus récent) à CSS qui vous permet de mettre en forme le contenu en colonnes sans que tout cela ne soit joué par des divs:

column-count: 2;
35
Fenton

Il existe maintenant une solution beaucoup plus simple que lorsque cette question avait été posée à l'origine, il y a cinq ans. Une Flexbox CSS facilite la mise en page des deux colonnes. C'est l'équivalent simple du tableau de la question initiale:

<div style="display: flex">
    <div>AAA</div>
    <div>BBB</div>
</div>

L'un des avantages de la Flexbox est qu'elle vous permet de spécifier facilement comment les éléments enfants doivent être réduits et développés pour s'adapter à la taille du conteneur. Je développerai l’exemple ci-dessus pour que la boîte ait toute la largeur de la page, donne à la colonne de gauche une largeur minimale de 75 px et agrandit la colonne de droite pour saisir l’espace restant. Je vais également extraire le style dans son propre bloc, attribuer des couleurs d'arrière-plan afin que les colonnes soient apparentes et ajouter le support Flex hérité pour certains navigateurs plus anciens.

<style type="text/css">
.flexbox {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.left {
    background: #a0ffa0;
    min-width: 75px;
    flex-grow: 0;
}

.right {
    background: #a0a0ff;
    flex-grow: 1;
}
</style>

...

<div class="flexbox">
    <div class="left">AAA</div>
    <div class="right">BBB</div>
</div>

Flex est relativement nouveau. Par conséquent, si vous êtes bloqué et que vous devez prendre en charge IE 8 et IE 9, vous ne pouvez pas l'utiliser. Cependant, à la date de rédaction de ce document, http://caniuse.com/#feat=flexbox indique un support au moins partiel des navigateurs utilisés par 94,04% du marché.

10
twm

Eh bien, si vous voulez la méthode super facile, il suffit de mettre 

<div class="left">left</div>
<div class="right">right</div>

.left {
    float: left;    
}

cependant, vous aurez peut-être besoin de plus que cela, en fonction de vos autres exigences de mise en page.

8
fearofawhackplanet

Toutes les réponses précédentes fournissent uniquement un emplacement codé en dur indiquant l'endroit où la première colonne se termine et où commence la deuxième colonne. Je m'attendais à ce que cela ne soit pas nécessaire ou même souhaité.

Les versions récentes de CSS connaissent un attribut appelé columns qui rend les présentations à base de colonnes extrêmement simples. Pour les anciens navigateurs, vous devez également inclure -moz-columns et -webkit-columns.

Voici un exemple très simple qui crée jusqu'à trois colonnes si chacune d'entre elles a une largeur d'au moins 200 pixels, sinon moins de colonnes sont utilisées:

<html>
  <head>
    <title>CSS based columns</title>
  </head>
  <body>
    <h1>CSS based columns</h1>
    <ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;">
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six</li>
      <li>Item eight</li>
      <li>Item nine</li>
      <li>Item ten</li>
      <li>Item eleven</li>
      <li>Item twelve</li>
      <li>Item thirteen</li>
    </ul>
  </body>
</html>
6
Axel Beckert

Si vous voulez le faire à la manière HTML5 (ce code particulier fonctionne mieux pour des blogs, où <article> est utilisé plusieurs fois, une fois pour chaque annonce de blog; au final, les éléments eux-mêmes importent peu, c'est le style et l'élément placement qui vous donnera les résultats souhaités):

<style type="text/css">
article {
  float: left;
  width: 500px;
}

aside {
  float: right;
  width: 200px;
}

#wrap {
  width: 700px;
  margin: 0 auto;
}
</style>

<div id="wrap">
  <article>
     Main content here
  </article>
  <aside>
     Sidebar stuff here
  </aside>
</div>
3
Shauna

Je sais que ceci est un ancien post, mais je me suis dit que j'ajouterais mes deux penneth. Que diriez-vous de la liste de description rarement utilisée et souvent oubliée? Avec un simple peu de CSS, vous pouvez obtenir un balisage vraiment propre.

<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>

regardez cet exemple http://codepen.io/butlerps/pen/wGmXPL

2
philip

Ce code vous permet non seulement d'ajouter deux colonnes, mais aussi d'ajouter autant de colonnes que vous le souhaitez et de les aligner à gauche ou à droite, de modifier les couleurs, d'ajouter des liens, etc. Consultez également le lien Fiddle

Fiddle Link: http://jsfiddle.net/eguFN/

<div class="menu">
                <ul class="menuUl">
                    <li class="menuli"><a href="#">Cadastro</a></li>
                    <li class="menuli"><a href="#">Funcionamento</a></li>
                    <li class="menuli"><a href="#">Regulamento</a></li>
                    <li class="menuli"><a href="#">Contato</a></li>
                </ul>
</div>

Css est comme suit

.menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}

.menu a{
color:#000000
}

.menuUl {
  list-style: none outside none;
  height: 34px;
}

.menuUl > li {
  display:inline-block;
  line-height: 33px;
  margin-right: 45px;

}
1
harishannam

quelques petits changements pour le rendre réactif

<style type="text/css">
#wrap {
    width: 100%;
    margin: 0 auto;
    display: table;
}
#left_col {
   float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}
@media only screen and (max-width: 480px){
    #left_col {
       width:100%;
    }
    #right_col {
       width:100%;
    }
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>
0
Altravista

Vous pouvez créer des colonnes de texte avec CSS Multiple Columns property. Vous n'avez besoin d'aucune table ou de plusieurs divs.

HTML

<div class="column">
       <!-- paragraph text comes here -->
</div>

CSS

.column {
    column-count: 2;
    column-gap: 40px;
}

Pour plus d’informations sur les colonnes multiples CSS, consultez https://www.w3schools.com/css/css3_multiple_columns.asp

0
TThomas
<div id"content">
<div id"contentLeft"></div>
<div id"contentRight"></div>
</div> 

#content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
#contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
#contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
}

Évidemment, vous devrez ajuster la taille des colonnes en fonction de votre site, des couleurs, etc., mais cela devrait suffire. Vous devez également vous assurer que vos largeurs ContentLeft et ContentRight ne dépassent pas la largeur du contenu (marges comprises).

0
Magnum26