<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2열 레이아웃 오른쪽 고정 왼쪽 적응형< ; /title>
<style type="text/css">
.main {
height:600px;
Background-color:skyblue;
margin-right:200px;
}
. right {
width:200px;
height:600px;
background-color:lightgreen;
float:right; /*블록 요소의 올바른 부동 설정*/
}
</style>
</head>
<body>
<div>body</div>
<div>right</div>
</body>
</html> ;
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
2층의 관점에 동의합니다
오른쪽에 div를 위한 공간을 남기고 싶어서 margin-right:200px;
를 사용하신 건가요?
하지만 div의 기본 너비는 100%입니다.
그래서 margin-right:200px를 설정한 후에도 div의 너비는 실제로 여전히 100%입니다.
패딩, 여백, 너비 및 테두리가 실제 너비에 추가되기 때문입니다. 구성 요소의 너비 또는 높이
<div>main</div>
<div>right</div>
을
<div class="main">main</div>
<div class="right">right</div>
코드를 다시 테스트해보세요~
코드 삼키러 갔는데 수업이 없어졌어요