BFC 규칙을 기반으로 하는 CSS 2열 레이아웃(코드 예)
- 不言앞으로
- 2019-04-03 11:35:382805검색
이 글은 BFC 규칙을 기반으로 한 CSS 2열 레이아웃(코드 예제)에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
css 일반적인 적응형 2열 레이아웃을 구현하는 방법에는 여러 가지가 있습니다.
여기서 말하는 것은 오버플로가 표시되도록 설정되지 않은 경우 새로운 BFC를 형성하여 구현하는 것입니다. BFC가 무엇인지는 먼저 검색해보시면 기본적으로 다 나와있습니다. 나중에 여유 시간이 생기면 BFC와 예시에 대해 이야기하겠습니다. 그게 다입니다. 코드를 입력하세요:
<!-- 利用BFC的overflow hidden实现两列布局-->
<!DOCTYPE html>
<html>
<head>
<title>利用BFC规则实现两栏布局</title>
<meta charset="utf8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.contain {
width: 100%;
height: 100%;
background: grey;
color: #fff;
}
.contain .left {
float: left;
/*margin-right: 20px;*/
width: 200px;
height: 100%;
word-wrap: break-word; /* 用于纯数字和英文时能够超出时自动换行*/
background: blue
}
.contain .right {
height: 100%;
overflow: hidden; /* 让right成为一个BFC*/
word-wrap: break-word; /* 用于纯数字和英文时能够超出时自动换行*/
background: darkblue;
}
</style>
</head>
<body>
<!-- CSS2.1规范中已经明确提出，设置overflow属性（非visible）能触发块级格式化上下文(Block Formatting Conext, BFC)。 -->
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quis error ea veniam animi quibusdam, nobis repudiandae consectetur sed? Minus architecto cumque perspiciatis saepe rerum non dolorum voluptates similique, consequuntur.</div>
<div>right这里的overflow:hidden不是本来的意思（超出容器内容截取掉不显示），而是利用了BFC规则（overflow不为visible时会创建出一个BFC）</div>
</div>
</body>
</html>
코드에서 가장 긴 줄(37번째 줄)에 주의하세요. 여기 텍스트는 영어가 아니라 라틴어입니다. 물론 나는 아니다. 손을 너무 많이 때렸다. 테스트하는 동안 무언가를 입력하고 싶지만 무엇을 입력해야 할지 모르고 보기 흉하다면 게으른 것일 수 있습니다. lorem을 입력하고 Tab 키를 누르면 고정된 첫 번째 문장을 제외하면 다음 문장이 무작위로 생성됩니다. 전제는 편집기에 emmit 플러그인이 장착되어 있다는 것입니다. Hbuilder 및 vscode는 내장되어 있으며 직접 사용할 수 있습니다. 메모장은 확실히 작동하지 않습니다. 나는 이것을 개인적으로 테스트했습니다. 작은 물건이에요! 다른 주석은 거의 작성되었습니다. 코드는 원래 매우 간단하지만 이러한 작업을 시도하고 구현하려면 CSS가 더 많은 실습 경험이 필요합니다. 이번 에세이는 여기까지입니다. 바빠서 퀄리티가 좋지 않을 수도 있는데, 이제 본격적으로 글을 쓰기 시작했습니다.
그리고 왼쪽은 고정식, 오른쪽은 적응식입니다. 고정된 오른쪽과 적응적인 왼쪽은 모두 쉽게 처리할 수 있다고 생각합니다. 이 2열 적응은 두 열 모두 적응적이라는 의미는 아닙니다.
【관련 추천: CSS 동영상 튜토리얼】
위 내용은 BFC 규칙을 기반으로 하는 CSS 2열 레이아웃(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!