在我们日常开发中布局是我们必不可少的步骤，今天介绍日常开发中常见的几种页面布局方式，如有错误，欢迎指正，少废话，直接上代码。
1：左边定宽右边不定宽
如图：
1.png
html代码
<div class="parent">
<div class="left">
<p>左边固定宽度100px</p>
</div>
<div class="right">
<p>右边宽度不固定</p>
<p>右边宽度不固定</p>
</div>
</div>
css代码一
.left{
width: 100px;
float: left;
}
.left p{
background:red;
}
.right{
margin-left: 120px;
}
.right p{
background: pink;
}
css代码二
.left{
width: 100px;
float: left;
}
.left p{
background:red;
}
.right{
overflow: hidden;
}
.right p{
background: pink;
}
css代码三
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{width: 100px}
.left p{
background:red;
}
.right p{
background: pink;
}
css代码四
.parent{
display: flex;
}
.left{
width: 100px;
margin-right: 20px;
background:red;
}
.right {
background: pink;
flex: 1
}
就先介绍这四种方式布局了 现代开发不考虑老版本浏览器兼容更多喜欢flex布局 ，尤其是移动端，如果pc端考虑到兼容问题 则前面的比较合适
还有两列定宽右边不定宽 道理一样 在此代码上加就OK了
2：左右等高布局
如图：
6.png
html代码
<div class="parent">
<div class="left">
<p>我的高度跟随右边的高度</p>
</div>
<div class="right">
<p>右边宽度不固定</p>
<p>右边宽度不固定</p>
<p>右边宽度不固定</p>
<p>右边宽度不固定</p>
<p>右边宽度不固定</p>
<p>右边宽度不固定</p>
<p>右边宽度不固定</p>
<p>右边宽度不固定</p>
</div>
</div>
css代码一
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left {
width: 100px;
background: red;
margin-right: 60px;
}
.right{
background: pink;
}
css代码二
.parent{
display: flex;
}
.left {
width: 100px;
background: red;
margin-right: 20px;
}
.right{
flex: 1;
background: pink;
}
3：等宽布局
如图：
3.png
html代码
<div class="parent_flex">
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</div>
css代码一
.parent_flex{
margin-left: -20px;
}
.parent{
display: table;
width: 100%;
table-layout: fixed;
background: #ccc;
height: 200px;
}
.parent .column{
display: table-cell;
padding-left: 20px;
}
.parent .column p{
background: pink;
}
css代码二
.parent{
width: 80%;
background: #ccc;
height: 300px;
display: flex;
margin:0 auto;
}
.parent .column{
height: 150px;
background: pink;
flex: 1;
}
.column+.column{
margin-left: 20px;
}
4：两边定宽中间不定宽
如图：
8.png
html代码：
<div class="parent">
<div class="left"><p>左边</p></div>
<div class="right"><p>右边</p></div>
<div class="center"><p>中间</p></div>
</div>
css代码一
.parent{
width: 80%;
background: #ccc;
margin:0 auto;
}
.left{
width: 100px;
float: left;
margin-right: 10px;
background: red;
}
.right{
width: 100px;
float: right;
margin-left: 10px;
background: red;
}
.center{
overflow: hidden;
background: pink;
}
上面的写法就是需要交换div center 的代码放到后面 浮动的方式 来布局
下面用table或flex 就不需要
html代码二
<div class="parent">
<div class="left"><p>左边</p></div>
<div class="center"><p>中间</p></div>
<div class="right"><p>右边</p></div>
</div>
css代码一
.parent{
width: 100%;
background: #ccc;
margin:0 auto;
display: table;
table-layout: fixed;
}
.left{
width: 100px;
padding-right: 10px;
display: table-cell;
}
.right{
width: 100px;
padding-left: 10px;
display: table-cell;
}
.center{
display: table-cell;
}
p{
background: pink;
}
css代码二
.parent{
width: 100%;
background: #ccc;
display: flex;
height: 200px;
}
.left,.right{
background: red;
width: 100px;
}
.left{
margin-right: 10px;
}
.right{
margin-left: 10px;
}
.center{
flex: 1;
background: pink;
}
看到这里，恭喜你2018年新的开始了，文章写得比较简单都是些基础的知识，记得帮点个赞哦 ，如有问题可以留言 ！祝大家在新的一年2018 收获多多，共同学习成长。
网友评论