Comment faire une mise en page en trois colonnes CSS

J'ai une question CSS très, très simple qui a déjà été posée mille fois déjà sous différentes formes, et qui semble ne pas avoir de réponse définitive.Comment faire une mise en page en trois colonnes CSS

Je veux juste créer trois colonnes sur une page HTML, en utilisant CSS. Peu importe à propos de la largeur fixe par rapport au liquide: il suffit de trois colonnes.

Voici une page HTML complète:

<html> 
<body> 
<div id="left" style="float:left; width:300px;"> 
<h3>Column 1</h3> 
</div> 
<div id="right" style="float:right; width:300px;"> 
<h3>Column 3</h3> 
</div> 
<div id="middle"> 
<h3>Column 2</h3> 
</div> 
</body> 
</html>

Dans Chrome, au moins, cela pousse les colonnes de droite & à gauche en bas au milieu. Qu'est-ce qui ne va pas?

Source

2010-11-22 AP257

float est sensible à l'ordre. Mettez la gauche, puis au milieu, puis à droite.
Avez-vous essayé de faire flotter la partie centrale aussi?

Vous pouvez essayer cette

<html> 
<body> 
    <div id="left" style="float:left; width:300px;border:1px solid black;"> 
    <h3>Column 1</h3> 
    </div> 

    <div id="middle" style='float:left;width:600px;border:1px solid black;'> 
    <h3>Column 2</h3> 
    </div> 

    <div id="right" style="float:left; width:300px;border:1px solid black;"> 
    <h3>Column 3</h3> 
    </div> 

</body> 
</html>

Source

2010-11-22 20:39:43 JAL

Eh oui, cela a fonctionné, merci. – AP257

comme ça ?: http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/

flotter juste tout à gauche, et ont les colonnes circulent dans l'ordre normal dans votre code HTML.

<div id="left"> 
    <h3>Column 1</h3> 
</div> 
<div id="middle"> 
    <h3>Column 2</h3> 
</div> 
<div id="right"> 
    <h3>Column 3</h3> 
</div>

css:

#left { 
background-color: red; 
float:left; 
width:200px; 
} 

#middle { 
background-color: salmon; 
float:left; 
width:200px; 
} 

#right { 
background-color: pink; 
float:left; 
width:200px; 
}

si vous ne voulez pas qu'ils enveloppent, vous pouvez envelopper un conteneur div autour d'eux, ou utilisez

body { 
width: 600px; /*combined width of three columns*/ 
margin: 0 auto; 
}

http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/1/

Source

2010-11-22 20:40:26

Comment faire une mise en page en trois colonnes CSS

Répondre

Questions connexes