Largeur en pourcent

Le pourcent est une unité de mesure relative au block conteneur. C'est génial pour les images : ici nous avons une image qui a toujours 50% de la largeur de son conteneur. Essayez de réduire la taille de la page pour voir. 

article img {
  float: right;
  width: 50%;
}
<article class="clearfix"> an image

Vous pouvez même utiliser min-width et max-width pour limiter la largeur maximale ou minimale de l'image.

</article>

mise en page avec une largeur en pourcent

Vous pouvez utiliser le pourcent pour votre mise en page, mais cela peut demander un peu de travail. Dans cet exemple, le contenu de la nav s'agence de manière désagréable quand la fenêtre est trop étroite. Cela se réduit à ce qui marche le mieux pour votre contenu. 

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}
<div class="container">
<section>

Quand cette mise en page est trop étroite, la nav est écrasée. Pire, vous ne pouvez pas utiliser min-width sur la nav pour empêcher cela, parce que la colonne de droite ne le respecterait pas.

</section>
<section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>
  • Creative Commons License