BFC 규칙을 기반으로 하는 CSS 2열 레이아웃(코드 예)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

BFC 규칙을 기반으로 하는 CSS 2열 레이아웃(코드 예)

不言

Apr 03, 2019 am 11:35 AM

bfc

이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.