CSS 2列レイアウト
1874 ワード
レイアウトでは、左の列が幅を固定し、右の列がブラウザの幅によって変化する2つの列が必要になります.どのように実現しますか?
従来の方法はfloatを利用して左部分を浮動させ、marginを通じて右部分を右に移動し、必要な効果を得ることであり、コードは以下の通りである.
cssコードは次のとおりです.
図のように、目的の効果を得ることができます.
CSS 3が発売したボックスレイアウトでは、box-flex属性を利用して、より簡便な方法でこのようなレイアウトニーズをより柔軟に制御することができ、コードは以下の通りである.
cssコードは次のとおりです.
プログラムの完全なコードの場所:http://runjs.cn/code/xyhyg7tv
従来の方法はfloatを利用して左部分を浮動させ、marginを通じて右部分を右に移動し、必要な効果を得ることであり、コードは以下の通りである.
<!-- , , -->
<div class="left background-color-red height-60 width-300"></div>
<div class=" background-color-black height-60 margin-left-301 "></div>
cssコードは次のとおりです.
.color-blue {
color:blue;
}
.color-yellow {
color:yellow;
}
.background-color-blue {
background-color: blue;
}
.background-color-black {
background-color:black;
}
.background-color-red {
background-color:red;
}
.background-color-yellow {
background-color:yellow;
}
.height-60 {
height:60px;
}
.border-color-red {
border: 2px solid #ff0000;
}
.left {
float:left;
}
.right {
float:right;
}
.font-size-20{
font-size: 20px;
}
.line-height-1_5{
line-height: 1.5;
}
.width-1 {
width:100%;
}
.width-auto {
width:auto;
}
.width-300 {
width:300px;
}
.width-960 {
width:960px;
}
.width-100 {
width:100%;
}
.inline-block {
display: inline-block;
}
/* */
.center-1 {
margin: 0 auto;
}
/* */
.center-2 {
position:absolute;
left:50%;
margin-left:-480px;
}
.margin-left-301 {
margin-left:301px;
}
図のように、目的の効果を得ることができます.
CSS 3が発売したボックスレイアウトでは、box-flex属性を利用して、より簡便な方法でこのようなレイアウトニーズをより柔軟に制御することができ、コードは以下の通りである.
<!-- , , -->
<div class="box"><!-- -->
<div class="background-color-black height-60 width-300"></div>
<div class="background-color-red height-60 flex"></div>
</div>
cssコードは次のとおりです.
.box {
display: box;
display: -webkit-box;
}
.flex {
-webkit-box-flex: 1;
}
プログラムの完全なコードの場所:http://runjs.cn/code/xyhyg7tv