課程
/前端開發
/HTML/CSS
/網頁布局基礎
實現浮動的機制有哪幾種
2016-07-22
源自：網頁布局基礎 3-1
正在回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css" media="screen">
.wrap{
position:relative;
width:700px;
margin:0 auto;
}
div{
width: 100px;
height: 100px;
.left{
background-color: red;
float:left;
.right{
background-color:blue;
float:left
.left1{
background-color:green;
position:absolute;
left:0;
top:110px;
.right1{
background-color:pink;
left:110px;
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="left1"></div>
<div class="right1"></div>
</div>
</body>
</html>
兩種吧，一種是為元素設置float屬性，還有一種就是為父元素設置相對定位，子元素自適應跨寬度部分設置絕對定位，且設置margin-left屬性值
舉報
讓你精通CSS中三大定位機制，徹底掌握網頁布局的相關知識
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-11-07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css" media="screen">
.wrap{
position:relative;
width:700px;
margin:0 auto;
}
div{
width: 100px;
height: 100px;
}
.left{
background-color: red;
float:left;
}
.right{
background-color:blue;
float:left
}
.left1{
background-color:green;
position:absolute;
left:0;
top:110px;
}
.right1{
background-color:pink;
position:absolute;
left:110px;
top:110px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="left1"></div>
<div class="right1"></div>
</div>
</body>
</html>
2016-07-22
兩種吧，一種是為元素設置float屬性，還有一種就是為父元素設置相對定位，子元素自適應跨寬度部分設置絕對定位，且設置margin-left屬性值