css 레이아웃의 부동, 포지셔닝, 마이너스 간격 간의 유연한 결합 이용
4610 단어 위치 지정마이너스 여백css 레이아웃의 부동
단일 열 고정 폭 단일 열 레이아웃 적응:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
* {margin:0;padding:0;}
.cont, .side {float:left;}
.cont {width:100%;}
.main {margin-right:200px;background:#DDDDDD;}
.side {margin-left:-200px;width:200px;background:#F7F7F7;}
</style>
</head>
<body>
<div class="cont">
<div class="main">main</div>
</div>
<div class="side">side</div>
</body>
</html>좌우 정폭 가운데 레이아웃 적응:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
* {margin:0;padding:0;}
.cont, .side, .sub-main {float:left;}
.cont {width:100%;}
.main {margin-right:200px;margin-left:300px;background:#DDDDDD;}
.side {margin-left:-200px;width:200px;background:#F7F7F7;}
.sub-main {margin-left:-100%;width:300px;background:#F7F7F7;}
</style>
</head>
<body>
<div class="cont">
<div class="main">main</div>
</div>
<div class="side">side</div>
<div class="sub-main">sub-main</div>
</body>
</html>두 열과 같은 높은 사용자 적응 레이아웃:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
* {margin:0;padding:0;}
.layout {overflow:hidden;}
.cont, .side {float:left;padding-bottom:9999px;margin-bottom:-9999px;}
.cont {width:100%;}
.main {margin-right:200px;background:#DDDDDD;}
.side {margin-left:-200px;width:200px;background:#F7F7F7;}
</style>
</head>
<body>
<div class="layout">
<div class="cont">
<div class="main">
main
<br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
<div class="side">side</div>
</div>
</body>
</html>부동의 소포성과 상대적 포지셔닝 백분율 데이터 값 특성을 이용하여 전설에 의하면'상대적 부동'이라고 부른다
.unknow_width_center1 {position:relative; left:50%;float:left;}
.unknow_width_center1 li {position:relative; right:50%; z-index:2;float:left}
<ul class="unknow_width_center1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>부모 요소에 부동float를 설정하고 부모 요소의position 속성을relative와left:50%로 설정합니다.하위 요소는position:relative와left:-50%를 설정하여 수평 가운데를 설정합니다.
블록 레벨 요소를 디스플레이: Block 형식으로 표시할 수 있으며, 무의미한 탭을 추가하지 않고, 끼워넣기 깊이를 추가하지 않습니다.단점은position:relative를 설정한 것이다.부작용을 가져왔고 폐쇄(제거) 부동이 필요하다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
커서 위치 삽입 내용HTML 코드: JavaScript 코드:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
