Rumah > Artikel > hujung hadapan web > 调整页面布局的几种方法
调整页面布局的几种方法
- 一个新手asal
- 2017-09-18 10:43:518737semak imbas
1.使用浮动布局
优点：兼容性比较好。
缺点：浮动后，元素是脱离文档流的，需要谨慎处理好清除浮动还有浮动的元素和周边元素之间的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.layout{
margin: 20px;
}
.layout article p{
min-height: 100px;
}
</style>
</head>
<body>
<!-- 浮动解决方案 -->
<section class="layout float">
<style>
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
</style>
<article class="left-right-center">
<p class="left"></p>
<p class="right"></p>
<p class="center">
<h1>浮动解决方案</h1>
1.这是三栏布局中间部分
1.这是三栏布局中间部分
</p>
</article>
</section>
</body>
</html>注意：最要注意的一点是，中间列一定要放在左右两列的后面！！！
2.使用绝对定位布局
优点：布局相对迅速
缺点：定位的元素脱离了文档流，意味着其子元素也要脱离文档流，所以这种方式的可使用性比较差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.layout{
margin: 20px;
}
.layout article p{
min-height: 100px;
}
</style>
</head>
<body>
<!-- 绝对定位解决方案 -->
<section class="layout absolute">
<style>
.layout.absolute .left-right-center{
position: relative;
}
.layout.absolute .left{
position: absolute;
left: 0;
width: 300px;
background: red;
}
.layout.absolute .right{
position: absolute;
right: 0;
width: 300px;
background: blue;
}
.layout.absolute .center{
position: absolute;
left: 300px;
right: 300px;
background: yellow;
}
</style>
<article class="left-right-center">
<p class="left"></p>
<p class="center">
<h2>绝对定位解决方案</h2>
1.这是三栏布局绝对定位解决方案
1.这是三栏布局绝对定位解决方案
</p>
<p class="right"></p>
</article>
</section>
</body>
</html>3.使用flex布局
优点： 很好的解决了浮动和绝对定位的缺点，现在移动端基本都是用flex布局
ie8以下 不支持flex
<section class="layout flex">
<style>
.layout.flex .left-right-center{
display: flex;
margin-top: 140px;
}
.layout.flex .left{
flex: 0 0 300px;
width: 300px;
background: red;
}
.layout.flex .right{
flex: 0 0 300px;
width: 300px;
background: blue;
}
.layout.flex .center{
flex: 1;
background: yellow;
}
</style>
<article class="left-right-center">
<p class="left"></p>
<p class="center">
<h2>Flexbox解决方案</h2>
1.这是三栏布局flexbox解决方案
1.这是三栏布局flexbox解决方
</p>
<p class="right"></p>
</article>
</section>注意： 中间列要放在中间！！！
4.使用表格布局
优点：兼容性还不错
缺点：其中一栏内容高度增加，另外两栏的高度也会增加，有时我们并不需要他们同时增高；不利于搜索引擎抓取信息；
<!-- 表格布局解决方案 -->
<section class="layout table">
<style>
.layout.table .left-right-center{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left{
display: table-cell;
width: 300px;
background: red;
}
.layout.table .right{
display: table-cell;
width: 300px;
background: blue;
}
.layout.table .center{
display: table-cell;
background: yellow;
}
</style>
<article class="left-right-center">
<p class="left"></p>
<p class="center">
<h2>表格布局解决方案</h2>
1.这是三栏布局表格布局解决方案
1.这是三栏布局表格布局解决方案
</p>
<p class="right"></p>
</article>
</section>5.网格布局
<!-- 网格布局解决方案 -->
<section class="layout grid">
<style>
.layout.grid .left-right-center{
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .right{
background: blue;
}
.layout.grid .center{
background: yellow;
}
</style>
<article class="left-right-center">
<p class="left"></p>
<p class="center">
<h2>网格布局解决方案</h2>
1.这是三栏布局网格布局解决方案
1.这是三栏布局网格布局解决方案
</p>
<p class="right"></p>
</article>
</section>假如把高度已知去掉或者高度超出
1.flex布局高度可以自适应
2.表格布局奥杜可以自适应
3.浮动，绝对定位，网格布局不能自适应高度
Atas ialah kandungan terperinci 调整页面布局的几种方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css纵向标尺如何制作Artikel seterusnya：CSS制作提示框'正在加载请。。。。'实例教程