이 기사에서는 다음과 같이 왼쪽 및 오른쪽 너비 고정 중간 html">적응형 html 레이아웃 솔루션에 대한 자세한 설명을 소개하고 모든 사람과 공유합니다.
a. 플로팅 레이아웃을 사용하세요.html 구조는 다음과 같습니다
<div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //여기부터 먼저 주의하세요 왼쪽 및 오른쪽 부동 요소는 중간 요소가 렌더링되기 전에 렌더링됩니다. 요소가 부동된 후 나머지 형제 블록 수준 요소는 상위 요소의 너비를 차지합니다. <style> .box{ height:200px } .left{ float:left; ; 너비:300px } </style> b. 고정 위치 지정을 사용합니다.html 구조는 다음과 같습니다
<div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //플로팅 레이아웃과 동일 , 먼저 왼쪽 및 오른쪽 요소가 상위 요소의 왼쪽 및 오른쪽 끝에 위치하도록 렌더링하고 나머지 중간 요소는 상위 요소의 나머지 너비를 차지합니다. <스타일> .box{ 위치: 상대; } .left{ 위치: 절대; 왼쪽: 0; } .right{ 너비: 100px; .center{ 여백: 0 100px ; 배경: 빨간색 }</style> c.테이블 레이아웃상위 요소인 display:table과 하위 요소인 display:table-cell을 배치하면 인라인 블록으로 전환됩니다.
이 레이아웃의 장점은 호환성이 좋다는 것입니다.
<div class=box> <div class=left> 왼쪽 </div> <div class=center> 가운데 </div> <div class=right> 오른쪽 </div></div><style> .box{ 디스플레이 : 테이블; 너비: 100%; } .left{ 디스플레이: 테이블 셀; 왼쪽: 0; } .right{ 너비: 100px } .center; 100%; 배경: 빨간색 }</style> d.유연한 레이아웃상위 요소 표시: Flex 하위 요소가 모두 한 행에 정렬됩니다.
하위 요소의 flex:n 너비는 상위 요소의 너비/n이 됩니다.
예를 들어 flex:1의 경우 너비는 상위 요소의 높이와 같습니다.
탄력적 레이아웃의 단점은 호환성이 높지 않다는 것입니다. 현재 IE 브라우저에서는 탄력적 레이아웃을 사용할 수 없습니다.
<div class=box> <div class=left> 왼쪽 </div> <div class=center> 가운데 </div> <div class=right> 오른쪽 </div></div><style> .box{ 디스플레이 : 플렉스; 너비: 100%; } .left{ 너비: 100px; 왼쪽: 0; 오른쪽{ 너비:100px } .center{ }</style> e. 그리드 레이아웃상위 요소 표시:그리드;
그리드 템플릿열:100px 자동 100px;
순서대로 첫 번째 하위 요소의 너비는 100px이고 두 번째 요소는 적응형이며 세 번째 요소는 100px입니다.
그리드 레이아웃의 장점은 매우 간단하고 상위 요소 스타일에 의해 직접적으로 결정된다는 점입니다. 단점은 호환성이 높지 않다는 것입니다.
<div class=box> <div class=left> 왼쪽 </div> <div class=center> 가운데 </div> <div class=right> 오른쪽 </div></div><style> .box{ 디스플레이 : 그리드; 그리드-템플릿-열: 100px 자동 100px: }</style>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.