CSS 3열 레이아웃의 세 가지 구현 방법(성배 레이아웃, 이중 비행 날개 레이아웃, Flex 레이아웃)

이 글의 내용은 LNMP가 환경 구축을 소스 코드 형태로 기록하는 과정(상세 내용)입니다. 필요한 참고 자료가 있으면 도움이 되길 바랍니다.

렌더링:

성배 레이아웃

nbsp;html>


<title>圣杯</title>
<style>
.container{
    padding:0 200px 0 180px;
    height:100px;
}
.left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:red;
    position:relative;
    left:-180px;
}
.main{
    float:left;
    width:100%;
    height:100px;
    background:blue;
}

.right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:green;
    position:relative;
    right:-200px;
}

</style>


<div>
  <div>middle</div>
  <div>left</div>
  <div>right</div>
<h3>Double Flying Wing Layout</h3>
<pre class="brush:php;toolbar:false">nbsp;html>


    <meta>
    <title>双飞翼</title>
    <style>
.main{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
.left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:red;
}
.right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:green;
}
</style>


  <div></div>
  <div>left</div>
  <div>right</div>

Flex Layout

nbsp;html>


    <meta>
    <title>Flex</title>
    <style>
.flex {
    display: flex;
    flex-flow: row;
}
.left{
    width: 180px;
    height: 100px;    
    background-color: red;
}
.main{
    flex: 1; 
    height: 100px;
    background-color: blue;
}
.right {
    width: 200px;
    height: 100px;
    background-color: green;
}
    </style>


<div>
    <div>left</div>
    <div>middle</div>
    <div>right</div>
</div>

메인이 왼쪽 모듈과 오른쪽 모듈 모두에 특정 너비를 제공하려는 경우 오른쪽에는 padding: 0 100px 0 200px 또는 margin: 0 100px 0 200px 만 있습니다.
이 두 가지 경로:
마진 경로를 택하면 끝까지 계속 가면 작성하는 최종 코드가 이중 비행 날개임을 알 수 있습니다.
패딩 경로를 택하면 그것이 성배입니다.

추천 관련 기사:

CSS(코드 포함)로 3열 레이아웃을 구현하는 세 가지 방법

CSS를 사용하여 롤러코스터 로더의 애니메이션 효과를 구현하는 방법