Comment diviser un bloc en trois colonnes avec du HTML & CSS?

Bonjour, je conçois une page web et après avoir créé un DIV pour y ajouter du texte, je me demande comment le diviser en 3 colonnes. Merci d’avance pour vos réponses.

Apprenant Demandé le 2017-02-21 dans Programmation.
Ajouter un commentaire
1 Réponse(s)
Meilleure réponse

Salut Videl,

Nous allons créer un ID appelé ‘col‘ pour notre DIV principal. On pourrais aussi bien lui donner un autre nom, c’est un choix (éviter quand même le nom qui commencent par un chiffre) 😉

Pour chaque colonne, on a la taille du grand DIV divisée par 3 à laquelle on retire les valeurs du MARGIN.

<!DOCTYPE html>
<html>
<head>
<!-- Debut code CSS -->
<style>
body{
    width: 100%;
}
#col{
    display:block; position:relative;
    width:900px;
    height:200px;
}
#col ul{
    display: block;
    width: 100%;
    padding:0px
}
#col ul li{
    display: inline-block;
    width: 30% ;
    margin-left: 1%;
    margin-right: 1%;
}
</style>
<!-- Fin code CSS -->
</head>
<body>
<!-- Debut bloc de texte -->
    <div id="col">
    <!-- Debut colonnes -->
            <ul>
                <li>Voici ma première colonne</li>
                <li>Voici ma deuxième colonne</li>
                <li>Voici ma troisième colonne</li>
            </ul>
    <!-- Fin colonnes -->
    </div>
<!-- Fin bloc de texte -->
</body>
</html>

 

Stagiaire Répondues le 2017-02-21.
Ajouter un commentaire

Votre réponse

En publiant votre réponse, vous acceptez la politique de confidentialité et les conditions d'utilisation.