共计 761 个字符,预计需要花费 2 分钟才能阅读完成。
<!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> 浮动布局练习 3 </title>
<style>
* { | |
margin: 0; | |
padding: 0; | |
} | |
.box { | |
width: 1226px; | |
height: 615px; | |
margin: 10px auto; | |
background-color: pink; | |
} | |
.box .left { | |
float: left; | |
width: 234px; | |
height: 100%; | |
background-color: purple; | |
} | |
.box .right { | |
float: left; | |
width: 992px; | |
height: 100%; | |
background-color: skyblue; | |
} | |
/* 亲儿子选择器 > */ | |
.box .right>div { | |
float: left; | |
width: 234px; | |
height: 300px; | |
background-color: pink; | |
margin-left: 14px; | |
margin-bottom: 14px; | |
} |
</style>
</head>
<body>
<div class=”box”>
<div class="left"> | |
左青龙 | |
</div> | |
<div class="right"> | |
<div>1</div> | |
<div>2</div> | |
<div>3</div> | |
<div>4</div> | |
<div>5</div> | |
<div>6</div> | |
<div>7</div> | |
<div>8</div> | |
</div> |
</div>
</body>
</html>
正文完