CSS 적응형 레이아웃-JS 튜토리얼-php.cn

CSS 적응형 레이아웃

php中世界最好的语言

풀어 주다： 2018-03-19 10:31:12

원래의

2101명이 탐색했습니다.

이번에는 CSS 적응형 레이아웃에 대해 알려드리겠습니다. CSS 적응형 레이아웃의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

우선 이 우스꽝스럽고 허식적인 이름을 누가 생각해 냈는지 모르겠습니다. 고정된 너비를 가지고 있습니다.

　자, 마지막 코드를 보여드리겠습니다:

 1     <style> 2             *{ 3                 margin: 0; 4                 padding: 0; 5             } 6             .wrap { 7                 background-color: #FBD570; 8                 overflow: hidden; 9             }10             .left {11                 float: left;12                 width: 100px;13                 background: #00f;14                 height: 180px;15             }16             .right {17                 float: right;18                 width: 150px;19                 background: #0f0;20                 height: 200px;21             }22             .center {23                 background: #B373DA;24                 height: 150px;25                 margin-left: 100px;26                 margin-right: 150px;27             }28         </style>29     </head>30     <body>31         <p class="wrap">32             <p class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</p>33             <p class="left">left，宽度固定，高度可固定也可以由内容撑开</p>34             <p class="right">right，宽度固定，高度可固定也可以由内容撑开</p>35         </p>36     </body>

로그인 후 복사

　그러면 효과는 다음과 같습니다:

　이 큰 부분의 중간 부분은 탐색 창의 너비가 변경됨에 따라 실제로 변경될 수 있습니다.

　그런데 젠장, 정말 궁금하지 않나요? ! 양쪽의 내용을 가로지르는 중앙의 본체는 도대체 뭐죠? 우리가 원하는 것은 그것들을 수평선에 두는 것입니다. 코드를 다음과 같이 변경합니다.

 1 <style> 2             *{ 3                 margin: 0; 4                 padding: 0; 5             } 6             .wrap { 7                 background-color: #FBD570; 8                 padding: 0 150px 0 100px; 9                 overflow: hidden;10             }11             .left {12                 float: left;13                 width: 100px;14                 background: #00f;15                 height: 180px;16                   margin-left: -100%;17                   position: relative;18                   left:-100px;19             }20             .right {21                 float: right;22                 width: 150px;23                 background: #0f0;24                 height: 200px;25                 margin-left: -150px;26                 position: relative;27                   right:-150px;28             }29             .center {30                 background: #B373DA;31                 height: 150px;32                 float: left;33                 width: 100%;34             }35         </style>36     </head>37     <body>38         <p class="wrap">39             <p class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</p>40             <p class="left">left，宽度固定，高度可固定也可以由内容撑开</p>41             <p class="right">right，宽度固定，高度可固定也可以由内容撑开</p>42         </p>43     </body>

로그인 후 복사

아이디어는 다음과 같습니다. 왼쪽 상자를 위로 올리려면 가운데 상자의 너비를 음수 왼쪽 여백으로 설정해야 합니다. 즉, .left {margin -왼쪽:-100%;} . 이런 식으로 왼쪽 상자를 가장 왼쪽으로 이동할 수 있습니다. 오른쪽 상자를 위로 올리려면.left {margin-left:-100%;}。这样左盒子才可以往最左边移动。而让右边的盒子上去

需要设置其左边距为负的自己的宽度，也就是.right {margin-left：-150px;}

왼쪽 여백이 음수인 자체 너비, 즉 .right {margin-left: -150px;}를 설정해야 합니다. 이런 방식으로 오른쪽 상자가 행의 맨 오른쪽에 표시될 수 있습니다.

　끝난 줄 알았나요? 실제로는 그렇지 않습니다. 중앙 메인 부분에 'center, yes'라는 단어가 차단되어 있기 때문입니다. 즉, 소위 '날아다니는 날개'라는 새로운 두 개가 본체의 내용을 차단한다는 의미입니다. 그래서 우리는 여전히 이 두 개의 작은 부러진 날개를 움직여야 하지만 우리는 그것을 볼 수 없기 때문에 화면 밖으로 움직일 수 없습니다.

그래서 우리는 다음을 수행합니다. 상위 요소를 사용하여 왼쪽 및 오른쪽 padding

값을 설정하고 상위 요소의 세 하위 상자를 가운데로 밀어 넣습니다. 그것은 .wrap{ 패딩: 0 150px 0 100px;}입니다. 이렇게 하면 두 개의 작은 부러진 날개를 위한 약간의 공간이 확보됩니다.

마지막으로 왼쪽과 오른쪽에 있는 두 개의 작은 부러진 날개를 각각 "당겨" 즉,

.left{ position: relative; left: -100px;}
.right{position: relative;right: -150px;}

로그인 후 복사

　이렇게 해서 이중으로 날아다니는 찻잔 레이아웃이 완성됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS 적응형 레이아웃