Partagez la méthode d'implémentation de table-cell pour compléter la disposition de largeur fixe à gauche, largeur fixe à droite et largeur fixe à gauche et à droite.

L'éditeur suivant partagera avec vous la méthode d'implémentation de table-cell pour compléter la disposition de largeur fixe à gauche, de largeur fixe à droite et de largeur fixe à gauche et à droite. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil

Utilisez table-cell pour compléter les mises en page suivantes (compatible avec ie8 et supérieur)

1. - largeur fixe sur le côté droit Adaptatif

1. .left{   
               width: 300px;   
               height: 500px;   
               border: 1px solid;   
               float: left;   
         }   
   .right{   
               width: 10000px;   
               height: 500px;   
               display: table-cell;   
               border: 1px solid;   
         }   
       </style>
   <p class="left"></p>
   <p class="right">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore est et itaque nesciunt nobis officia omnis optio similique vitae. Cupiditate eum exercitationem harum id iusto maiores quaerat reprehenderit sint.   
   </p>

L'effet est le suivant :

(Ajustez la taille de la fenêtre pour tester si le côté droit change en fonction la taille de la fenêtre)

2. Largeur fixe sur le côté droit - côté gauche adaptatif

1. <style>
           .right{   
               width: 200px;   
               height: 500px;   
               border: 1px solid;   
               display: table-cell;   
           }   
           .left{   
               height: 500px;   
               border: 1px solid;   
               display: table-cell;   
           }   
           .parent{   
               display: table;   
               table-layout: fixed;   
               width: 100%;   
           }   
   </style>
   <p class="parent">
       <p class="left">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, assumenda dolores eaque, fugiat illo, in inventore itaque magni nemo nisi nulla obcaecati quaerat totam unde voluptatem voluptatum. Amet, totam.   
       </p>
       <p class="right"></p>
   </p>

L'effet est le suivant :

Il est légèrement différent du largeur fixe à gauche Bien que seule la position de la largeur fixe ait été modifiée, elle ne peut pas être utilisée directement. Le flottement se fait comme une largeur fixe sur le côté gauche.

3. Largeur fixe gauche et droite - milieu adaptatif

Code XML/HTMLCopier le contenu dans le presse-papiers

<style>
       .parent{   
           display: table;   
           table-layout: fixed;   
           width: 100%;   
       }   
        p{   
            border: 1px solid;   
        }   
        .left,.right,.center{   
            display: table-cell;   
        }   
        .left{   
            width: 100px;   
            height: 200px;   
        }   
        .right{   
            width: 100px;   
            height: 200px;   
        }   
</style>
 <p class="parent">
      <p class="left"></p>
        <p class="center">
       　　Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet delectus ducimus ea eos eum, libero modi quia, soluta temporibus unde,    
　　　　　　ut. Aliquam, dolorem ipsam porro quae quisquam saepe vitae!   
        </p>
      <p class="right"></p>
</p>

L'effet est le suivant :

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!