2列のレイアウト
-
説明:列適応の固定列幅。このDOのような利点は、適応が主なコンテンツとして使用することができ、広告を掲載することができます幅の列を設定することです。
-
実装:①フロート+マージン②の絶対位置を使用して
例: float+margin
<body>
<div class="left">定宽</div>
<div class="right">自适应</div>
</body>
.left{
width: 200px;
height: 600px;
background: red;
float: left;
display: table;
text-align: center;
line-height: 600px;
color: #fff;
}
.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
3列レイアウト
-
特徴:両サイドに固定幅、幅の真ん中が自動で、その後、コンテンツは適応、マージンプラスマージンすることができ、セットに
-
実装:
-
フロートプロパティを使用して、左右の列、余白属性の気晴らしを使用して中央の列を使用します
-
位置決めは、即ち、位置決めのための位置を使用して2つの列を左右位置を使用してマージンを位置決めするために使用される中間体カラムを達成しました
-
例: float+margin
<body>
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
</body>
.left{
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.right{
width: 150px;
height: 300px;
background: green;
float: right;
}
.middle{
height: 300px;
background: red;
margin-left: 220px;
margin-right: 160px;
}
例:position +magin
<body>
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
</body>
.left{
background: yellow;
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.middle{
height: 300px;
margin: 0 220px;
background: red;
}
.right{
height: 300px;
width: 200px;
position: absolute;
top: 0;
right: 0;
background: green;
}
弾性レイアウト
- 説明:一次元に設計された方法としてレイアウトされたレイアウト弾性ボックス(フレキシボックス)。あなたが行または列のレイアウトになりたいという一次元コンテンツ。弾性体になるためにフレックスレイアウト:あなたは、ディスプレイを使用することができます
例:
.container {
display: flex;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
注:该容器的直接子元素会变为弹性项(flex item),并按行排列