简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe

高洛峰
Libérer： 2017-03-08 15:02:48
original
1991 Les gens l'ont consulté

La mise en page à trois colonnes gauche, centrale et droite est très courante. Nous examinons ici les exemples d'application de la mise en page CSS à trois colonnes à largeur fixe, y compris la méthode de disposition à largeur égale et à espacement égal :

Disposition à trois colonnes à largeur fixe
C'est très basique On peut le comprendre directement en regardant le code : 

<p id="wrapper">
 <p id="header">header</p>
 <p id="body" class="cls">
  <p id="aside">
   <p class="inner">
    aside   
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   </p>
  </p>
  <p id="content" class="cls">
   <p id="main">
    <p class="inner">
     main   
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p>
   </p>
   <p id="content-aside">
    <p class="inner">
     content-aside   
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p>
   </p>
  </p>
 </p>
 <p id="footer">footer</p>
</p>
Copier après la connexion

#header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}   
#body{ width: 980px; margin: 0 auto;}   
#aside{ float: left; width: 240px; background: #ccc;}   
#content{ margin-left: 240px;}   
#main{ float: left; width: 540px; background: pink;}   
#content-aside{  float: left; width: 200px; background: orange; }   
#footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}
Copier après la connexion

Exemple : Réaliser trois colonnes d'images avec une largeur égale et un espacement égal
Instructions détaillées pour lutilisation de la disposition CSS à trois colonnes à largeur fixe

Chaque bloc d'image flotte vers la gauche, 30% de largeur, et 2,5% marge gauche :
100%=(2,5% 30%) (2,5% 30%) (2,5% 30%) 2,5%

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8">    
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">    
<title>三列图片等宽布局</title>    
<style>    
* {    
    margin: 0;    
    padding: 0;    
}    
img {    
    display: block;    
    width: 30%;    
    margin: 2.5% 0 0 2.5%;    
    float: left;    
}    
</style>    
</head>    
<body>    
<p>    
<img  src="byd.jpg" / alt="Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe" ><img  src="byd.jpg" / alt="Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe" ><img  src="byd.jpg" / alt="Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe" >    
<img  src="byd.jpg" / alt="Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe" ><img  src="byd.jpg" / alt="Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe" ><img  src="byd.jpg" / alt="Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe" >    
<img  src="byd.jpg" / alt="Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe" ><img  src="byd.jpg" / alt="Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe" ><img  src="byd.jpg" / alt="Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe" >    
</p>        
</body>    
</html>
Copier après la connexion

largeur : 30 %; représente 30% de la largeur de l'élément parent.
hauteur : 30%; Si la hauteur spécifique de l'élément parent n'est pas définie, alors cette hauteur n'a aucun effet
Pour obtenir un carré réactif, vous peut utiliser l'unité vw (Viewport width) : 

.square {    
    width: 30%;    
    height: 30vw;    
    background: url("byd.jpg") no-repeat scroll center 0 transparent;    
    background-size: 100% 100%;    
    margin: 2.5% 0 0 2.5%;    
    float: left;    
}
Copier après la connexion

Cependant, il convient de noter que les versions inférieures d'IE et les versions inférieures des navigateurs Android/iOS ne prennent pas en charge l'unité de fenêtre d'affichage. .
Ou utilisez JS pour définir la hauteur en fonction de la largeur afin d'assurer la compatibilité :

<script src="jquery.js"></script>    
<script>    
$(document).ready(function(){    
    $("img").height($("img").width());    
});    
$(window).resize(function(){    
    $("img").height($("img").width());    
});    
</script>
Copier après la connexion

La mise en page en pourcentage peut également être considérée comme une mise en page réactive
La mise en page simple. et la disposition en pourcentage pratique est toujours très adaptée à la mise en page mobile WAP : 

min-width:320px;    
max-width:980px;    
width:100%;    
overflow-x: hidden;    
margin: 0 auto;
Copier après la connexion

La largeur minimale est de 320 px, la largeur maximale est de 980 px et la largeur s'adapte automatiquement entre 320 px et 980 px. , ce qui semble correct.
Dans la balise Instructions détaillées pour l'utilisation de la disposition CSS à trois colonnes à largeur fixe, il vous suffit de définir la valeur en pourcentage de l'attribut width, telle que width = "40%", il n'est pas nécessaire de définir l'attribut height, pour que l'image peut être mis à l'échelle en fonction de la proportion d'origine.
Les blocs dans le conteneur peuvent également être disposés en utilisant des pourcentages, tels que 60 % à gauche et 40 % à droite.


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
css 三列布局
source：php.cn
Article précédent：Utilisez CSS pour implémenter une belle méthode de soumission de formulaire Article suivant：Résumé des méthodes de construction de bordures déformées à l'aide de la propriété border de CSS
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
protocole de boîte en grille en CSS Je veux que les deux premières cases montent avec une largeur maximale et que la deuxième ...
Depuis 2024-04-03 16:36:04
0
2
334
Créez diverses mises en page de cartes à l'aide d'une seule grille ou de Flex : un guide pratique J'essaie de créer une mise en page de carte réactive comme celle illustrée. Ce que je fais...
Depuis 2024-04-02 21:07:36
0
2
377
Implémentez une disposition en grille avec 3 colonnes avec un élément couvrant toute la hauteur de la première colonne Je souhaite compenser le contenu d'une colonne en CSS. Je pense que c'est aussi simple que...
Depuis 2024-04-02 09:05:41
0
1
301
Espacement flexible interrompu lors de la tentative de débordement de la balise HTML <pre><code> au lieu de l'habillage J'applique du CSS au sélecteur de précode afin de créer des blocs de code stylisés comme v...
Depuis 2024-04-01 12:22:06
0
1
296
CSS peut-il afficher des lignes de quadrillage ? J'ai commencé à apprendre la disposition des grilles CSS. Dans un monde idéal, je serais c...
Depuis 2024-03-31 20:38:21
0
2
395
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！