- 左右布局
思路：一個父容器，兩個子容器体捏，子容器左右浮動
<body>
<div class="container clearfix">
<div class="left">left11111111111</div>
<div class="right">right22222222222222222222</div>
</div>
</body>
body{
border: 1px solid gray;
}
div.container{
border: 1px solid red;
max-width: 398px; //這兩行用來設(shè)置居中的
margin: 0 auto;
}
.clearfix::after{
content: "";
display: block;
clear:both;
}
.left{
border: 1px solid red;
height: 100px;
float: left;
}
.right{
border: 1px solid red;
height: 150px;
float: right;
}
效果圖：
js-12-01.png
- 左中右布局
思路：左右布局用左右浮動脚祟，中布局采用text-align: center;其中中間元素display為inline-block窄做。
<body>
<div class="container clearfix">
<div class="left">left1111</div>
<div class="middle">middle222</div>
<div class="right">right3333333</div>
</div>
</body>
body{
border: 1px solid gray;
}
div.container{
border: 1px solid red;
max-width: 398px;
margin: 0 auto;
text-align: center;
}
.clearfix::after{
content: "";
display: block;
clear:both;
}
.left{
border: 1px solid red;
height: 100px;
float: left;
}
.middle{
border: 1px solid red;
height: 120px;
display: inline-block;
vertical-align: top;
/* margin-left: auto; 對inline-block無效主到，行不通*/
/* margin-right: auto; */
/* float: left; */
}
.right{
border: 1px solid red;
height: 150px;
float: right;
}
效果圖：
js-12-02.png
水平居中
上面的左中右布局中的中間元素的布局用到了水平居中伶授，此處用block的margin：0 auto;也可實現(xiàn)，不具體演示了年栓。垂直居中
思路：采用absolute方法拆挥，然后用transform修正。
<body>
<div class="parent clearfix">
<div class="middle">middle222</div>
</div>
</body>
*{
border: 1px solid red;
}
.parent{
height: 100px;
position: relative;
}
.parent .middle{
position: absolute;
width:;
top: 50%;
transform: translateY(-50%);
}
效果圖：
js-12-04.png
