bienvenue sur notre site internet consacré à l'étude du positionnement des blocs-exercices

#

## Exercices d'application

### Exercice 1 : positionnement en flux

#### Consigne :

Créer deux blocs 50px de hauteur l'un en-dessous de l'autre avec un espace de séparation vertical de 20px. Le premier bloc sera bleu et le second sera vert. Le résultat final devra être :

#### Correction :

    Partie HTML :
    <div class="bloc1">bla bla bla</div>
    <div class="bloc2">bli bli bli</div>

    Et la CSS correspondante :
    .bloc1 {
    background-color: blue;
    height: 50px;
    }
    .bloc2 {
    background-color: green;
    height: 50px;
    margin-top: 20px;
    }

### Exercice 2 : positionnement flottant

#### Consigne :

Créer trois blocs côte-à-côte avec un espace de séparation horizontal de 20px. Chaque bloc aura une largeur de 100px et une hauteur de 50px. Le résultat final devra être :

#### Correction :

    Partie HTML :
    <div class="bloc1">bla bla bla</div>
    <div class="bloc2">bli bli bli</div>
    <div class="bloc3">blu blu blu</div>
    Et la CSS correspondante :
    .bloc1 {
    background-color: blue;
    height: 50px;
    width: 100px;
    float: left;
    }
    .bloc2 {
    background-color: green;
    height: 50px;
    width: 100px;
    float: left;
    margin-left: 20px;
    }
    .bloc3 {
    background-color: red;
    height: 50px;
    width: 100px;
    float: left;
    margin-left: 20px;
    }

### Exercice 3 : imbrication

#### Consigne :

Créer un bloc jaune contenu dans un bloc bleu. Le bloc bleu fait 100px X 100px avec 40px de marge interne. Le bloc jaune fait 50px X 20px et à gauche une marge externe de 20px. Le résultat final devra être :

#### Correction :

    Partie HTML :
    <div class="conteneur">
    <div class="bloc">bli bli bli
    </div>
    </div>
    Et la CSS correspondante :
    .conteneur {
    background-color: blue;
    height: 100px;
    width: 100px;
    padding-top: 40px;
    }
    .bloc {
    background-color: yellow;
    height: 50px;
    width: 50px;
    margin-left: 20px;
    }

### Exercice 4 : positionnement

#### Consigne :

Créer bloc contenant une image alignée à droite d'un texte. Le conteneur occupera 40% de la page. Le résultat final devra être :

#### Correction :

    Partie HTML :
    <div class="conteneur">
    <img class="image" src="..." alt="" />
    <p>bla bla bla bla bla bla bla bla bla bla bla bla bla ...</p>
    </div>Et la CSS correspondante :
    .conteneur {
    width: 40%;
    background-color: yellow;
    }
    .image {
    float: right;
    }

Retour à la page d'acceuil