CSS를 사용하여 왼쪽(오른쪽) 너비를 고정하고 오른쪽(왼쪽) 너비를 적응적으로 적용하는 방법 소개

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

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

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

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

*{ 여백: 0; 패딩:0}

.전체{ 너비:100%;}

p class="
왼쪽"> 왼쪽 300px

                                                                        
🎜> 방법 1: 왼쪽에
float

float을 사용하여 고정 너비, 오른쪽 왼쪽 여백으로부터의 거리 == 왼쪽 레이어의 너비 CSS 코드: :red}

　.right{

margin-left:300px; background:green; }
방법 2: 왼쪽절대 위치 지정 오른쪽의 코드는 변경되지 않았습니다. 또는 오른쪽 왼쪽 여백의 거리 == 왼쪽 레이어의 너비
;

CSS 코드: 　.left{ 위치

: 절대; 왼쪽:0; 너비:300px; 배경:빨간색}

　.right{ 여백-왼쪽:300px; :green; } 방법 3(개인 취향): 왼쪽과 오른쪽 모두에 절대 위치 사용, 상위 상대 정의(영향을 주지 않음, 상대 정의 추가 권장) , 중복 방지)

　

css 코드:

　.left{ 위치: 왼쪽:0; 배경:빨간색}

　.right{ 위치: 절대; 왼쪽:300px; 배경:녹색 }2. 레이아웃 고정되지 않음, 올바른 레이아웃 고정 ----- 방법은 동일, 위치만 변경됨

                                                                                   > ">고정된 오른쪽 너비

방법 1. 를 사용하여 왼쪽에 왼쪽으로 플로팅,

오른쪽 여백 == 오른쪽 레이어 너비의 음수 값(오른쪽에서 적당한 거리를 두고 열려 있기 때문에)

,

오른쪽은 부동 고정 너비입니다

 .left{ float: 왼쪽; 너비:100%; 여백-오른쪽:-300px; 배경: 빨간색 }　.right{ 부동: 오른쪽; ;배경: 파란색;}

방법 2. 의 왼쪽과 오른쪽 모두에 절대 위치 지정과 부모의 상대 정의를 사용합니다. (영향 없음, 권장 중복 방지를 위해 상대 정의 추가)  

.left{ 위치: 절대; 왼쪽:0; 배경: 빨간색;}　.right{ 위치: 왼쪽:200px;
방법 3 ,

찌꺼기 청소 방법을 한 획으로 설명합니다. 🎜> 1.

별도레이어 정의

clear">

지우기:모두} 2 . 의사 클래스 방법: after (상위 클래스의 레이아웃 레이어에 사용됨) - 일반적으로 사용됨

🎜>

.father::after,.father::before{ 지우기: 둘 다; 내용: "" display: 테이블;}

　

　　

　　flotrgt">

 

3. 상위 요소 는 오버플로 를 숨김 또는 자동으로 설정하며, 고정 높이도 가능합니다. 권장하지 않음

.아빠 {오버플로 :숨김; 너비: 100%; } //overflow:auto; 높이:300px;

글은 비교적 단순하고, 쓰는 표현도 거의 없습니다. 아무리 많은 아이디어를 이야기하더라도 직접 코드가 실제로 작동하도록 두지 마십시오. 사용 후에는 의미를 이해하게 될 것입니다. .

보충 -- 가로 화면 금지

세로 모드에서 탐색이 더 좋습니다!

.orientation-alert{
배경: rgba(0,0,0,.85);
위치: 고정 ;
왼쪽: 0;

상단
: 0;높이: 100%;너비: 100%;

z-색인
: 1000000;색상: #FFF;디스플레이: 없음;
}
.orientation-alert p{
위치: 절대;
너비: 100%;
상단: 50%;

글꼴 크기
: 20px;줄 높이
: 30px;여백 상단
: -15px;text-align
: center;}@media screen and (orientation : Landscape){
.orientation-alert{
display: block;
}
}
@media 화면 및 (방향: 세로){
.orientation-alert{
디스플레이: 없음;
}
}

위 내용은 CSS를 사용하여 왼쪽(오른쪽) 너비를 고정하고 오른쪽(왼쪽) 너비를 적응적으로 적용하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!