table-cell의 구현 방법을 공유하여 왼쪽 고정 너비, 오른쪽 고정 너비, 왼쪽과 오른쪽 고정 너비의 레이아웃을 완성합니다.

다음 에디터는 왼쪽 고정 너비, 오른쪽 고정 너비, 왼쪽과 오른쪽 고정 너비의 레이아웃을 완성하기 위한 table-cell 구현 방법을 공유합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집기를 따라 살펴보겠습니다

table-cell을 사용하여 다음 레이아웃을 완성합니다(ie8 이상과 호환됨)

왼쪽 너비 고정 1. - 오른쪽 고정폭 적응형

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>

효과는 다음과 같습니다.

(창 크기를 조정하여 창에 따라 오른쪽이 바뀌는지 테스트합니다. size)

2. 오른쪽 고정 폭 - 왼쪽 적응형

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>

효과는 다음과 같습니다.

왼쪽의 고정 너비와 약간 다릅니다. 고정폭의 위치가 변경되어 플로팅 이미지의 왼쪽 부분을 직접 사용할 수 없습니다. 고정폭 방식으로 이루어졌습니다.

3. 왼쪽 및 오른쪽 고정 너비 - 가운데 적응

XML/HTML 코드클립보드에 콘텐츠 복사

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

효과는 다음과 같습니다.

위 내용은 table-cell의 구현 방법을 공유하여 왼쪽 고정 너비, 오른쪽 고정 너비, 왼쪽과 오른쪽 고정 너비의 레이아웃을 완성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!