整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
CSS中最常見的塊元素，便是 div，每一個都將獨立為一行。而最常見的內(nèi)聯(lián)元素，便是 span了，每一個都默認(rèn)從左到右排列連接起來。
有時候我們需要 div 的結(jié)構(gòu)，但是是需要 span 的效果，如何將這個特點一起利用起來呢？
想把上圖的京東·技術(shù)與數(shù)據(jù)中臺，和logo為一行，初始代碼如下，初始效果如上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.position-name {
font-weight: 600;
}
.position-desc {
font-size: 13px;
color: #a6a6a6;
}
</style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div>
<div class="position-name">京東</div>
<div class="position-desc">技術(shù)與數(shù)據(jù)中臺</div>
</div>
</body>
</html>加上 display: inline-block，使之為內(nèi)聯(lián)元素，而非塊元素即可，修改后的代碼如下，修改后的效果如上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.position {
/* 融合為塊元素 */
display: inline-block;
margin-left: 8px;
}
.position-name {
font-weight: 600;
}
.position-desc {
font-size: 13px;
color: #a6a6a6;
}
</style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div class="position">
<div class="position-name">京東</div>
<div class="position-desc">技術(shù)與數(shù)據(jù)中臺</div>
</div>
</body>
</html>利用好 CSS 提供的 display: inline-block 屬性即可。
三角
<div class="three"></div>左右div設(shè)置為絕對定位；左div設(shè)置為 left: 0px;右div設(shè)置為 right: 0px;
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html,body{
margin: 0px;
width: 100%;
}
h3{
height: 100px;
margin: 20px 0 0;
}
#left,#right{
width: 200px;
height: 200px;
background-color: #ffe6b8;
position: absolute;
top: 120px;
}
#left{
left: 0px;
}
#right{
right: 0px;
}
#center{
margin: 2px 210px;
background-color: #eee;
height: 200px;
}
</style>
<body>
<h3>實現(xiàn)三列寬度自適應(yīng)布局</h3>
<div id="left">我是左邊</div>
<div id="right">我是右邊</div>
<div id="center">我是中間</div>
</body>
</html>該布局的不足：因為是絕對定位，如果頁面上有其他的內(nèi)容，top的值要小心處理，最好給CSS樣式進(jìn)行一個初始化。
自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中，使用margin指定左右外邊距對其進(jìn)行一個定位。
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html,body{
margin: 0px;
width: 100%;
}
h3{
height: 100px;
margin: 20px 0 0;
}
#left,#right{
width: 200px;
height: 200px;
background-color: #ffe6b8;
}
#left{
float: left;
}
#right{
float: right;
}
#center{
margin: 2px 210px;
background-color: #eee;
height: 200px;
}
</style>
<body>
<h3>實現(xiàn)三列寬度自適應(yīng)布局</h3>
<div id="left">我是左邊</div>
<div id="right">我是右邊</div>
<div id="center">我是中間</div>
</body>
</html>該布局法的好處是受外界影響小，但是不足是 三個元素的順序，center一定要放在最后，這是和絕對定位不一樣的地方，center占據(jù)文檔流位置，所以一定要放在最后，左右兩個元素位置沒有關(guān)系。當(dāng)瀏覽器窗口很小的時候，右邊元素會被擊倒下一行。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
