table-cellの実装方法を共有すると、左固定幅、右固定幅、左右固定幅のレイアウトが完成します。

以下のエディターでは、左側の固定幅、右側の固定幅、左右の固定幅などのテーブルセルレイアウトの実装方法を共有します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

table-cell を使用して次のレイアウトを完成させます (IE8 以降と互換性があります)

1. 左側は固定幅、右側は適応型です

1. rree

効果は次のとおりです:

(ウィンドウのサイズを調整して、右側がウィンドウのサイズに応じて変化するかどうかをテストします)

2. 固定幅右側 - 適応左側

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>

   ログイン後にコピー

効果は次のとおりです:

位置だけですが、左側の固定幅とは少し異なります。固定幅の部分が変更されているため、完成した左の固定幅のようにフローティングを直接使用することはできません。

3. 左右の固定幅 - 中央の適応

XML/HTML コードコンテンツをクリップボードにコピーします

<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>

効果は次のとおりです:

以上がtable-cellの実装方法を共有すると、左固定幅、右固定幅、左右固定幅のレイアウトが完成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。