CSS를 사용하여 다중 행 및 다중 열 레이아웃을 구현하는 방법-CSS 튜토리얼-php.cn

이 글에서는 주로 다중 행 및 다중 열 레이아웃을 구현하는 CSS의 예제 코드를 소개합니다. 필요하신 분들은 참고하세요

1. 2열과 다중 행:

HTML:

<p class="box1">
    box1:实现两列多行布局
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</p>

로그인 후 복사

CSS:

.box1 {
  width: 500px;
  background: #EEEEEE;
}
.box1 ul {
  clear: both;
  overflow: hidden;
}
.box1 ul li {
  width: 48%;
  height: 100px;
  margin-bottom: 10px;
  background: skyblue;
  float: left;
}
.box1 ul li:nth-child(even) {
  margin-left: 4%;
}

로그인 후 복사

nth-child()를 사용하는데, 이는 ie9 이상의 브라우저와 호환됩니다. 나란히 놓인 두 p의 너비의 합, 100%를 뺀 나머지 너비 nth-child（），兼容ie9及以上的浏览器，中间的空隙就是两个并排p宽度之和，100%减去后剩下的宽度；

既然提到了nth-child（）,那么就要说一下nth-of-type（），也是只兼容ie9及以上的浏览器。它与nth-child的区别是：

<p class="box">
    <h1></h1>
    <h1></h1>
    <p></p>
    <p></p>
    <p></p>
</p>

로그인 후 복사

如果要让第二个p标签背景为红色，那么，p:nth-child(4)这个能实现效果；而p:nth-of-type(2)，就能实现。所以nth-of-type不管p标签前面有多少内容，都只认p的第二个元素。而nth-child却是找它父级的第几个元素。在这种情况下nth-of-type的优点就体现出来了。

2.多行多列

HTML：

<p class="box2">
    box2:多行多列
    <ul>
        <li>
            <p class="com">
                111
            </p>
        </li>
        <li>
            <p class="com">
                222
            </p>
        </li>
        <li>
            <p class="com">
                333
            </p>
        </li>
        <li>
            <p class="com">
                444
            </p>
        </li>
    </ul>
</p>

로그인 후 복사

CSS:

.box2 {
  background: #EEEEEE;
  margin-top: 20px;
  width: 500px;
}
.box2 ul {
  overflow: hidden;
  margin-left: -10px;
  background: #EEEEEE;
}
.box2 ul li {
  width: 33.3333%;
  height: 50px;
  float: left;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.box2 ul li .com {
  height: inherit;
  background: skyblue;
}

로그인 후 복사

这里实现的原理是：子级使用padding-left（元素间的间隙）和box-sizing:border-box，父级使用margin-left负值，这个值和子级padding-left是一样的。li里面加p只是为了让效果明显，不然给li加上背景，由于box-sizing：border-box

nth-child()가 언급되었으므로 n번째에 대해 이야기해야 합니다. -of-type()도 ie9 이상의 브라우저에서만 호환됩니다. 이 태그와 nth-child의 차이점은 다음과 같습니다.

<p class="box3">
    <p class="header">圣杯布局(使用浮动)顶部</p>
    <p class="container">
        <p class="center">
            中间自适应宽度,注意这个center是在left的p前面
        </p>
        <p class="left">
            左部固定宽度
        </p>
        <p class="right">
            右部固定宽度
        </p>
    </p>
    <p class="footer">圣杯布局底部</p>
</p>

로그인 후 복사

두 번째 p 태그의 배경을 빨간색으로 지정하려면 p:nth-child(4)를 사용하여 다음을 달성할 수 있습니다. 효과; 그리고 p:nth-of-type(2)이 달성될 수 있습니다. 따라서 nth-of-type은 p 태그 앞에 내용이 아무리 많아도 p의 두 번째 요소만 인식합니다. 그러나 n번째 자식은 부모의 첫 번째 요소를 찾는 것입니다. 이 경우 nth-of-type의 장점이 반영됩니다.

2. 여러 행과 여러 열

HTML:

.box3 {
  background: #EEEEEE;
  color: white;
  margin-top: 20px;
}
.box3 .header {
  width: 100%;
  background: #008000;
  height: 50px;
}
.box3 .container {
  clear: both;
  overflow: hidden;
  padding: 0 130px 0 100px;
}
.box3 .container .left {
  width: 100px;
  float: left;
  background: #008B8B;
  height: 100px;
  margin-left: -100%;
  position: relative;
  left: -100px;
}
.box3 .container .center {
  background: #00BFFF;
  height: 100px;
  float: left;
  width: 100%;
}
.box3 .container .right {
  width: 130px;
  float: left;
  background: #FA8072;
  height: 100px;
  margin-left: -130px;
  position: relative;
  right: -130px;
}
.box3 .footer {
  width: 100%;
  background: #222222;
  height: 30px;
}

로그인 후 복사

CSS:

<p class="box4">
    <p class="header">圣杯布局2(使用定位)顶部</p>
    <p class="container">
        <p class="left">
            左部固定宽度
        </p>
        <p class="center">
            中间自适应宽度，无需考虑顺序
        </p>
        <p class="right">
            右部固定宽度
        </p>
    </p>
    <p class="footer">圣杯布局2底部</p>
</p>

로그인 후 복사

여기서 구현된 원칙은 다음과 같습니다. 어린이는 padding-left(요소 사이의 간격) 및 box-sizing을 사용합니다. border-box에서 부모는 자식 padding-left와 동일한 음수 왼쪽 여백 값을 사용합니다. li에 p를 추가하는 것은 효과를 분명하게 하기 위한 것입니다. 그렇지 않고 li에 배경을 추가하면 box-sizing: border-box가 있기 때문에 li는 아무런 효과가 없는 것처럼 보입니다. 모두 함께 연결되어 있습니다.

2열, 4열, 5열 등을 구현하려면 li의 너비를 수정(균등하게 분배)하면 됩니다.

이 방법은 IE8 이상 브라우저와 호환됩니다. IE7에서는 각 li의 너비가 3열과 같이 평소보다 약 2% 적습니다. 정상적으로 표시되면 각 li의 너비는 33.333%입니다. 기본적으로 정상적으로 표시하려면 31.333%로 설정해야 합니다. . . 이에 대한 구체적인 이유는 설명하지 않았습니다. 나중에 시간이 나면 보충하겠습니다.

.box4 {
  background: #EEEEEE;
  color: white;
  margin-top: 20px;
}
.box4 .header {
  width: 100%;
  background: #008000;
  height: 50px;
}
.box4 .container {
  clear: both;
  overflow: hidden;
  padding: 0 130px 0 100px;
  position: relative;
}
.box4 .container .left {
  width: 100px;
  background: #008B8B;
  height: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.box4 .container .center {
  background: #00BFFF;
  height: 100px;
  width: 100%;
}
.box4 .container .right {
  width: 130px;
  background: #FA8072;
  height: 100px;
  position: absolute;
  top: 0px;
  right: 0px;
}
.box4 .footer {
  width: 100%;
  background: #222222;
  height: 30px;
}

로그인 후 복사

성배 레이아웃에서 가장 중요한 것은 3p가 중앙에 병치되어 있다는 것입니다. 위와 아래에 있는 두 개의 p는 숫자를 채우는 데 사용되었습니다. . .

구현 과정은 대략 다음과 같습니다. 1. 이 세 p의 HTML 배치 순서는 특별합니다. 중앙에 표시된 p가 HTML의 첫 번째, 그 다음 왼쪽, 마지막으로 오른쪽입니다. 2. 컨테이너가 패딩으로 설정되지 않기 전에 왼쪽 p와 오른쪽 p는 여백과 상대 위치로 설정되지 않았으며 세 ps는 모두 float: left입니다. 이때 페이지에 표시되는 것은 중앙이 독점 라인을 차지하고 그 다음 왼쪽 p, 그 다음 오른쪽 p3을 차지하며 왼쪽 p는 margin-left: -100%를 설정합니다. 이런 식으로 left는 두 번째 행에서 첫 번째 행의 가장 왼쪽으로 점프하여 중앙 p를 덮을 수 있습니다.

4. 오른쪽 p는 margin-left: -130px를 설정합니다. 이 값은 자체 너비 크기입니다. 그런 다음 오른쪽 p도 첫 번째 행의 가장 오른쪽으로 점프하여 중앙 p를 덮습니다. 5. 이때 컨테이너는 패딩을 설정합니다. 그러면 두 p의 왼쪽과 오른쪽이 각각 상대 위치를 설정하고, 자신의 너비만큼 거리를 이동합니다. 그러면 정상적으로 표시됩니다. 이 레이아웃 방법은 ie7과 호환되지만 ie6에서는 테스트되지 않았습니다. . .

4. 모조 성배 레이아웃

HTML:

<p class="box5">
    <p class="header">双飞翼布局顶部</p>
    <p class="container">
        <p class="center">
            <p class="center-in">
                中间自适应宽度,注意这个center是在left的p前面
            </p>
        </p>
        <p class="left">
            左部固定宽度
        </p>
        <p class="right">
            右部固定宽度
        </p>
    </p>
    <p class="footer">双飞翼布局底部</p>
</p>

로그인 후 복사

CSS:

.box5 {
  background: #EEEEEE;
  color: white;
  margin-top: 20px;
}
.box5 .header {
  width: 100%;
  background: #008000;
  height: 50px;
}
.box5 .container {
  clear: both;
  overflow: hidden;
}
.box5 .container .left {
  width: 100px;
  float: left;
  background: #008B8B;
  height: 100px;
  margin-left: -100%;
}
.box5 .container .center {
  background: #00BFFF;
  height: 100px;
  float: left;
  width: 100%;
}
.box5 .container .center .center-in {
  margin: 0 130px 0 100px;
}
.box5 .container .right {
  width: 130px;
  float: left;
  background: #FA8072;
  height: 100px;
  margin-left: -130px;
}
.box5 .footer {
  width: 100%;
  background: #222222;
  height: 30px;
}

로그인 후 복사

이 방법의 기본 아이디어는 다음과 같습니다. 왼쪽과 오른쪽 측면을 설정한 다음 중간 p에 패딩을 설정하면 동일한 효과를 얻을 수 있습니다. 중앙에 있는 세 개의 p의 레이아웃 순서에 대해 걱정하지 마세요. 저는 항상 이 방법을 사용합니다. ie7과도 호환됩니다. ie6은 테스트되지 않았습니다

5. 이중 비행 날개 레이아웃

🎜HTML:🎜🎜🎜rrreee🎜🎜🎜CSS: 🎜🎜🎜rrreee🎜🎜

이중 비행 날개 레이아웃과 성배 레이아웃은 비슷해 보이지만 가장 큰 차이점은 이중 비행 날개 레이아웃에서는 중앙의 가운데 p 안에 p가 있다는 것입니다. 레이아웃의 목적은 주로 여백을 통해 달성됩니다. 이 p의 값. 그러면 두 p의 왼쪽과 오른쪽에 대한 상대 위치를 설정할 필요가 없습니다. 다른 모든 것은 기본적으로 동일합니다

ie7과 호환되며, ie6은 테스트되지 않았습니다.

CSS3 flex, inline-block 등과 같은 다중 행 및 다중 열 레이아웃 방법도 많이 있습니다. . 아이디어만 있으면 레이아웃이 아무리 어려워도 달성할 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!