12-CSS布局入门（续）-作业
2018-04-19 本文已影响0人
格林姆大师
- 左右布局
思路：一个父容器，两个子容器，子容器左右浮动
<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; //这两行用来设置居中的
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;也可实现，不具体演示了。 -
垂直居中
思路：采用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
