CSS는 왼쪽(오른쪽)에 고정 너비를 구현하고 오른쪽(왼쪽)에 적응형 너비를 구현합니다. --- 클리어 플로팅-CSS 튜토리얼-php.cn

CSS는 왼쪽(오른쪽)에 고정 너비를 구현하고 오른쪽(왼쪽)에 적응형 너비를 구현합니다. --- 클리어 플로팅

高洛峰

풀어 주다： 2016-10-15 09:17:38

원래의

1343명이 탐색했습니다.

오래된 이야기인데 CSS는 레이아웃에 맞게 고정되어 있지 않습니다. 인터뷰에서든 일상 업무에서든 이 레이아웃 형식은 매우 일반적으로 사용되므로 오늘은 이 내용을 다루겠습니다. 메모 보관함은 학습과 통합을 위한 참고 자료이기도 합니다. 모두가 알고 있음에도 불구하고 기초를 다지기 위해서는 암기해야 합니다.

할말이 너무 많아서 코드로 가보시면 한 눈에 이해가 되실 겁니다. 어쩌면 당신은 그것을 단순하다고 무시할 수도 있지만 나는 무언가를 쓰는 것을 좋아합니다. . . . . . 신입생이라면 기초부터 열심히 공부해야 합니다.

추가할 수 있는 새로운 방법이 있으면 감사합니다! !

1. 왼쪽은 고정 레이아웃, 오른쪽은 적응형 레이아웃

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">固定左侧 300px</div>
        <div class="right">右侧自适应</div>
 </div>

로그인 후 복사

방법 1: float를 사용하여 왼쪽에 부동, 고정 너비, 왼쪽 여백 거리 지정 오른쪽 == 왼쪽 레이어

CSS 코드의 너비:

　　　　.left{ float:left;width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; width:100%}

로그인 후 복사

방법 2: 왼쪽에 절대 위치 지정, 오른쪽의 코드가 변경되지 않았거나 오른쪽 왼쪽 여백의 거리 == 왼쪽 레이어의 너비

CSS 코드:

　　　　.left{ position: absolute; left:0; width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; width:100%}

로그인 후 복사

방법 3(개인 취향): 왼쪽과 오른쪽 모두에 절대 위치 지정을 사용합니다. sides, parent의 상대 정의 (영향을 주지 않습니다. 겹치지 않도록 상대 정의를 추가하는 것이 좋습니다)

CSS 코드:

　　　　.left{ position: absolute; left:0; width:300px; background:red}
　　　　.right{ position: absolute; left:300px; background:green; width:100%}

로그인 후 복사

2. 왼쪽 레이아웃은 고정되지 않습니다. , 오른쪽 레이아웃은 고정 ----- 방법은 동일합니다. 위치만 변경하세요

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">左侧自适应</div>
        <div class="right">右侧宽度固定</div>
  </div>

로그인 후 복사

방법 1. 왼쪽에 왼쪽 플로트 사용, 오른쪽 여백 == 음수 값 오른쪽 레이어의 너비(왼쪽에서 열기 때문에 오른쪽 레이어와의 거리가 좋음), 오른쪽에 플로팅, 고정 너비

      .left{ float:left; width:100%; margin-right:-300px; background: red; }
　　.right{ float: right; width: 300px;background: blue;}

로그인 후 복사

방법 2, 절대 위치 지정 사용 왼쪽과 오른쪽 모두, 부모 상대 정의(영향을 주지 않습니다. 중복을 피하기 위해 상대 정의를 추가하는 것이 좋습니다)

       .left{ position: absolute; left:0;  width: 100%;  background: red;}
　　.right{ position: absolute;  left:200px; width:200px; background: green;}

로그인 후 복사

방법 3,

플로트를 지우는 방법은 한 획으로 설명 가능합니다

1. 플로팅 레이어 아래에 별도의 레이어를 정의합니다

.clear{clear:both}

2. 유사 -class 방식: after (상위 클래스의 레이아웃 레이어에서 사용) - 흔히 사용

         .father::after,.father::before{ clear: both; content: ""; display: table;}
  　　 <div class=&#39;father&#39;>
       　　 <div class="son-flotleft"></div>
　　　　　<div class="son-flotrgt"></div>
  　　 </div>

로그인 후 복사

3. 상위 요소의 오버플로를 숨김 또는 자동으로 설정, 고정 높이도 사용할 수 있음 - 아님 추천

        .father{overflow:hidden; width: 100%; }　  //overflow:auto; height:300px;

로그인 후 복사