CSS 적응형 레이아웃

php中世界最好的语言원래의: 2018-03-19 10:31:122063검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!