調整頁面佈局的幾種方法
- 一个新手原創
- 2017-09-18 10:43:518747瀏覽
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.以浮動，絕對定位，網格佈局不能自適應高度
以上是調整頁面佈局的幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css縱向標尺如何製作下一篇：css縱向標尺如何製作