浮動布局
左右固定寬高，設定左右浮動，中間內容設定overflow:hidden寬度自適應
<!--樣式代碼-->
<style>
.left {
width: 200px;
height: 300px;
float: left;
background-color: red;
}
.right {
width: 200px;
height: 300px;
float: right;
background-color: green;
}
.middle {
height: 300px;
overflow: hidden; /*重要的一步*/
background-color: gray;
border: 1px solid #000;
}
</style>
<!--結構代碼-->
<body>
<!--注意書寫結構順序，先左右后中-->
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
運行效果：
圣杯布局
三個盒子都設定為浮動，浮動方向都為同一方向，中間內容盒子設定width: 100%,兩邊內容固定寬高，假設浮動方向都為left，那么左邊盒子設定margin-left: -100%; 右邊盒子設定為margin-left為負的自身寬度，書寫dom結構時先寫中間內容的盒子，再寫左右盒子
<!--樣式-->
<style>
.middle {
width: 100%;
height: 300px;
background-color: gray;
float: left;
}
.left {
width: 200px;
height: 300px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: green;
float: left;
margin-left: -200px;
}
</style>
<!--結構-->
<body>
<!--先寫中間的內容區域-->
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</body>
運行效果：
雙飛翼布局
基本上和圣杯布局沒什么兩樣，無非就是中間內容盒子里面在嵌套一個子元素，并設定這個子元素的左右兩邊的margin為左右兩邊盒子的寬度
<!--樣式-->
<style>
.middle {
width: 100%;
height: 300px;
background-color: gray;
float: left;
}
.middle-content {
margin: 0 200px;
}
.left {
width: 200px;
height: 300px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: green;
float: left;
margin-left: -200px;
}
</style>
<!--結構-->
<body>
<!--先寫中間的內容區域-->
<div class="middle">
<div class="middle-content">這是中間內容</div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
運行效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60269.html
標籤：Html/Css
下一篇：練習中的零碎知識-CSS篇