三栏布局

浮动布局

  1. 分为三个div，另外一个父级包含这三个div，使用float，

  2. 注意点：三个div，left --> right ---> center 这种顺序

    <!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

body {

  margin: 0;

  padding: 0;

}

.left {

  float: left;

  width: 300px;

  height: 100px;

  background-color: red;

}

.right {

  float: right;

  width: 300px;

  height: 100px;

  background-color: blue;

}

.center {

  margin: 0px 300px 0px 300px;

  background-color: black;

  height: 100px;

}

</style>

</head>

<body>

<div class="father">

<div class="left">1</div>

<div class="right">2</div>

<div class="center">3</div>

</div>

</body>

</html>

    　　

    Flex

    设置中间盒子FLex：1，这样的话就可以实现自适应，默认水平排列

    <!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

.father {

  display: flex;

}

.left {

  width: 300px;

  height: 100px;

  background-color: red;

}

.center {

  flex:1;

  height: 100px;

  background-color: black;

}

.right {

  width: 300px;

  height: 100px;

  background-color: blue;

}

</style>

</head>

<body>

<div class="father">

<div class="left"></div>

<div class="center"></div>

<div class="right"></div>

</div>

</body>

</html>
flex相关知识点，一般会使用到的
http://www.runoob.com/w3cnote/flex-grammar.html

1 设置display：flex

2 容器图：

    轴：水平main axis和垂直cross axis

3 容器的属性

    flex-direction：主轴的方向，row | row-reverse | column | column-reverse;

    flex-wrap：换行， nowrap | wrap | wrap-reverse;

    flex-flow：flex-direction和flex-wrap简写

    justify-content：主轴上的对齐方式， flex-start | flex-end | center    

                    | space-between | space-around;

    align-items：交叉轴上如何对齐，flex-start | flex-end | center | 

                baseline | stretch;

    　　

    flex相关知识点，一般会使用到的
http://www.runoob.com/w3cnote/flex-grammar.html

1 设置display：flex

2 容器图：

    轴：水平main axis和垂直cross axis

3 容器的属性

    flex-direction：主轴的方向，row | row-reverse | column | column-reverse;

    flex-wrap：换行， nowrap | wrap | wrap-reverse;

    flex-flow：flex-direction和flex-wrap简写

    justify-content：主轴上的对齐方式， flex-start | flex-end | center    

                    | space-between | space-around;

    align-items：交叉轴上如何对齐，flex-start | flex-end | center | 

                baseline | stretch;

    　　

    绝对定位对齐

    <!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

.one {

  background-color: red;

  position: absolute;

  left: 0;

  width: 300px;

  height: 100px;

}

.two {

  left: 300px;

  right: 300px;

  background-color: blue;

  position: absolute;

  height: 100px;

}

.three {

  right: 0px;

  width: 300px;

  background-color: yellow;

  position: absolute;

  height: 100px;

}

</style>

</head>

<body>

<div class="father">

<div class="one">1</div>

<div class="two">1</div>

<div class="three">1</div>

</div>

</body>

</html>

    　　

posted @ 2018-08-07 19:42  dfgfgf  阅读(301)  评论(0)    收藏  举报