Mise en page adaptative CSS : Comment implémenter l'adaptation de la largeur CSS ?

La mise en page actuelle des pages Web doit être adaptée à différents écrans, elle doit donc être adaptative afin que le contenu de la page Web puisse être entièrement affiché. Par conséquent, l'article d'aujourd'hui vous présentera le contenu auto-adaptable en largeur CSS. Parlons en détail de la façon d'implémenter l'adaptation de la largeur CSS dans la mise en page adaptative CSS.

Articles connexes recommandés :
1.Comment réaliser une adaptation en hauteur CSS ? Un moyen simple d'adapter la hauteur CSS au contenu
2.Quelles sont les mises en page adaptatives courantes en CSS
Recommandations vidéo associées :
1.Tutoriel vidéo CSS - Jade Girl Heart Sutra Edition

Nous voyons souvent des pages comme celle-ci. Le côté gauche (ou droit) est une barre de navigation ou de menu fixe, et l'autre côté changera de taille de manière adaptative à mesure que le navigateur zoome. Mise en œuvre de l'adaptation.

Il existe deux méthodes d'implémentation les plus courantes pour l'adaptation de la largeur CSS, L'une est une mise en page à deux colonnes et l'autre est une mise en page à trois colonnes

Faisons-le ci-dessous Présentons brièvement ces deux méthodes respectivement.

1. Disposition adaptative à deux colonnes en largeur CSS :

Prenons comme exemple le côté droit avec une largeur fixe et le côté gauche avec une largeur adaptative :

1. La zone à largeur fixe flotte et la zone adaptative ne définit pas de largeur mais définit une marge

<div id="wrap">
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  <div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>

#sidebar {
  float: right; width: 300px;
}#content {
  margin-right: 300px;
}

Remarque :

Le côté droit est toujours fixe, et le côté gauche est toujours fixe. Le côté s'adapte à la taille restante de l'écran.

Mais en fait, cette méthode a des limites, c'est-à-dire que la barre latérale doit être avant le contenu dans la structure html.

2. Utilisez float et margin ensemble

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">
    <div class="contentInner">
       自适应区    </div>
  </div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

#content {
  margin-left: -300px; float: left; width: 100%;
}#content .contentInner{
  margin-left:300px;
}#sidebar {
  float: right; width: 300px;
}

Explication : De cette façon, la largeur réelle de contentInner est la largeur de l'écran -300px.

3. Utilisez le positionnement absolu pour la zone de largeur fixe et définissez la marge pour la zone adaptative

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  </div>

#wrap{
  position:relative;
}#content {
  margin-right:300px;
}#sidebar {
  position:absolute;
  width:300px;
  right:0;
  top:0;
}

4. table à réaliser

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

#wrap{
  display:table;
  width:100%;
}#content {
  display:table-cell;
}#sidebar {
 width:300px;
  display:table-cell;
}

Remarque : Cette méthode n'est pas compatible avec les navigateurs IE7 et inférieurs, car IE7 ne reconnaît pas l'affichage défini sur table.

2. Disposition à trois colonnes adaptative à largeur CSS :

1. Disposition à trois colonnes à largeur fixe

    <div class="div0">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>

*{
    padding: 0;
    margin: 0;
}
.div0{
    width: 800px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    margin: 50px auto;
    border: 2px solid #E51414;/*添加边框只为结果更直观*/
}
.left{
    width: 200px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #6E6C8A;
    float: left;/*设为左浮动*/
    text-align: center;
}
.middle{
    width: 430px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #806155;
    float: left;/*设为左浮动*/
    margin: 0 10px 0 10px;/*左右各加10px使得三列之间有间隙*/
    text-align: center;
}
.right{
    width: 150px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #8F9068;
    float: right;/*设为右浮动*/
    text-align: center;
}

2. Disposition à trois colonnes avec largeur fixe à gauche et à droite et largeur adaptative au milieu

 <!--<div class="div0">-->
 <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
<!--</div>-->

*{
    padding: 0;    
    margin: 0;}
    /*.div0{
    width: 800px;
    height: 500px;
    margin: 50px auto;
    position: relative;
    border: 2px solid #E51414;
}
可以不要这个父元素div0（即默认父元素为body），如果有，需将这个父元素设置为相对定位*/
.left{
    width: 200px;    
    height: 500px;    
    background: #6E6C8A;    
    position: absolute;    
    top: 0;    l
    eft: 0;
    /*设为绝对定位并且与其父元素的top、left距离都为0*/
    text-align: center;
    }
.middle{
    height: 500px;    
    background: #806155;    
    margin: 0 160px 0 210px;
    /*左右各加10px使得三列之间有间隙*/
    text-align: center;
    }
    .right{
        width: 150px;    
        height: 500px;    
        background: #8F9068;    
        position: absolute;    
        top: 0;    
        right: 0;
        /*设为绝对定位并且与其父元素的top、right距离都为0*/
    text-align: center;
    }

Explication : Lorsque la largeur du Les divs gauche et droit sont fixes, la largeur du div du milieu Lorsqu'elle est inconnue, la disposition à trois colonnes ne peut pas être obtenue à l'aide de flottants. Utilisez le positionnement absolu pour obtenir une disposition à trois colonnes : vous devez définir les éléments gauche et droit sur un positionnement absolu et définir les valeurs de marge gauche et droite de l'élément du milieu sur la largeur de l'élément droit et de l'élément gauche respectivement . Vous pouvez obtenir une disposition à trois colonnes sans envelopper l'élément parent. S'il existe un élément parent, vous devez définir l'élément parent sur un positionnement relatif. (Pour le positionnement, veuillez vous référer au manuel css)

Recommandations associées :

Comment CSS adapte-t-il la largeur div à content_html/css_WEB-ITnose

css implémente une largeur fixe sur le côté droit et une largeur adaptative sur le côté gauche_html/css_WEB-ITnose

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!