更新時間:2021-12-16 來源:黑馬程序員 瀏覽量:
我們在寫頁面的時候經(jīng)常會遇到需要將兩個div盒子同行顯示的情況,那么“兩個Div同行顯示”該如何顯示呢?一般兩個div同行顯示可以用float: left和display: inline_block來實現(xiàn),下面我們分別介紹。
首先我們先來看,沒有同行顯示的兩個div什么顯示效果。
代碼:
<div class="div1">div1</div>
<div class="div2">div2</div>
CSS樣式:
.div1 {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
color: aliceblue;
background-color: rgb(26, 135, 238);
}
.div2 {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
color: aliceblue;
background-color: rgb(7, 194, 178);
}
通過浮動使兩個div在同一行顯示,兩個div同時左浮動(float: left)或者有浮動(float: right)。
CSS樣式:
.div1 {
float: left; /* 添加左浮動 */
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
color: aliceblue;
background-color: rgb(26, 135, 238);
}
.div2 {
float: left; /* 添加左浮動 */
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
color: aliceblue;
background-color: rgb(7, 194, 178);
}
使用display: inline-block將兩個盒子轉(zhuǎn)為行內(nèi)塊,實現(xiàn)兩個div同行顯示。
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兩個div盒子一行顯示</title>
<style>
.div1 {
display: inline-block; /*轉(zhuǎn)為行內(nèi)塊兒 */
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
color: aliceblue;
background-color: rgb(26, 135, 238);
}
.div2 {
display: inline-block; /*轉(zhuǎn)為行內(nèi)塊兒 */
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
color: aliceblue;
background-color: rgb(7, 194, 178);
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
效果
注意:使用display: inlien-block轉(zhuǎn)為行內(nèi)塊之后,兩個行內(nèi)塊兒元素之間有縫隙。
產(chǎn)生縫隙的原因:
元素被當(dāng)成行內(nèi)元素排版的時候,元素之間的空白符(空格、回車換行等)都會被瀏覽器處理,根據(jù)white-space的處理方式(默認是normal,合并多余空白),我們這里是因為div1和div2兩個盒子代碼的之間的"回車"被處理成為了縫隙。我們將兩個div的代碼寫在一行就可以解決了,如下:
<div class="div1">div1</div><div class="div2">div2</div>
猜你喜歡: