Comment puis-je ligne 3 divs sur la même ligne?

Je suis surpris que personne n'a donné CSS tableau de mise en page comme une solution.

Vérifier que Travail Démo

Pur CSS 2.1, de la Croix-navigateur (IE8+)

HTML:

<div class="Row">
    <div class="Column">C1</div>
    <div class="Column">C2</div>
    <div class="Column">C3</div>
</div>

CSS:

.Row
{
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}
.Column
{
    display: table-cell;
    background-color: red; /*Optional*/
}

Je ne suis pas sûr de savoir comment je suis tombé sur ce post, mais puisque la plupart des réponses sont à l'aide de flotteurs, de positionnement absolu et d'autres options qui ne sont pas optimales maintenant un jours, j'ai pensé que je donnerais un nouvel élément de réponse qui est plus à jour sur les normes (float n'est pas vraiment plus casher).

CSS:

.parent {
  display: flex;
  flex-direction:row;
}

.column {
  flex: 1 1 0px;
  border: 1px solid black;
}

HTML:

<div class="parent">
    <div class="column">Column 1</div>
    <div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
    <div class="column">Column 3</div>
</div>

Vieux sujet, mais peut-être quelqu'un comme elle.

violon lien http://jsfiddle.net/74ShU/

<div class="mainDIV">
    <div class="leftDIV"></div>
    <div class="middleDIV"></div>
    <div class="rightDIV"></div>
</div>

et css

.mainDIV{
    position:relative;
    background:yellow;
    width:100%;
    min-width:315px;
}
.leftDIV{
    position:absolute;
    top:0px;
    left:0px;
    height:50px;
    width:100px;
    background:red;
}
.middleDIV{
    height:50px;
    width:100px;
    background:blue;
    margin:0px auto;
}
.rightDIV{
    position:absolute;
    top:0px;
    right:0px;
    height:50px;
    width:100px;
    background:green;
}

Juste ajouter flotteur gauche propriété sur tous les divs vous souhaitez faire apparaître dans une ligne autre que la dernière. ici est un exemple de

<div>
  <div style="float: left;">A</div>
  <div style="float: left;">B</div>
  <div>C</div>
</div>

Découvrez la fondation de prototypage rapide cadre ils ont géré ce tout à fait bien, fondamentalement, ils vous permettent d'utiliser le HTML comme ceci:

<div class="row">
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
</div>

C'est le plus simple HTML/CSS système de grille que je suis venu à travers, il est basé sur une grille de 12 colonnes.

Fondamentalement, les colonnes sont données en % de la largeur et de la marge de gauche par rapport à la ligne parent. Ils colonnes ont flottant à gauche, en position de parent, et l'affichage du bloc.

La ligne a plusieurs propriétés définies sur ce que des soins de base d'un problème qui provoque normalement la div contenant de l'effondrement à hauteur de 0 prévenir les divs suivants d'être "poussés" vers le bas comme ils le devraient.

Vous pouvez trouver des exemples de l'aide de la fondation du système de grille ici: http://foundation.zurb.com/docs/grid.php

Si vous ne souhaitez pas utiliser la totalité de la structure le code CSS suivant devrait faire l'affaire avec l'exemple de code que j'ai fourni:

.row:after {
    content: "";
    clear: both;
    display: table;
}

.four.column {
    float: left;
    width: 33%;
}

Si vraiment vous souhaitez un centre gauche et à droite des colonnes d'utiliser le code comme ceci:

CSS:

.row:after {
    content: "";
    clear: both;
    display: table;
}

.left {
    float: left;
    width: 100px;
}

.center {
    margin: 0 auto;
    width: 100px;
}

.right {
    float: right;
    width: 100px;
}

HTML:

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

Une autre solution possible:

<div>
  <h2 align="center">
  San Andreas: Multiplayer
</h2>
    <div align="center">
<font size="+1"><em class="heading_description">15 pence per
slot</em></font> <img src=
"http://fhers.com/images/game_servers/sa-mp.jpg" class=
"alignleft noTopMargin" style="width: 188px;" /> <a href="gfh"
class="order-small"><span>order</span></a>
    </div>
 </div>

Également utile.