div 實現田字格佈局

guile發表於2019-03-10

div 實現田字格佈局

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div 實現田字格佈局</title>

<style>
#part1{
width: 100px;
height: 100px;
background: blue;

float: left;
}

#part2{
width: 100px;
height: 100px;
background: red;

float: left;
}

#part3{
width: 100px;
height: 100px;
background: yellow;

float: left;
clear: left;
}

#part4{
width: 100px;
height: 100px;
background: green;

float: left;
}


#part5{
width: 100px;
height: 100px;
background: white;

float: left;
clear: left;
}

#part6{
width: 100px;
height: 100px;
background: black;

float: left;
}

</style>
</head>
<body>
<div id="part1">塊1</div>
<div id="part2">塊2</div>
<div id="part3">塊3</div>
<div id="part4">塊4</div>
<div id="part5">塊5</div>
<div id="part6">
    <div style="color: white">塊6</div>
</div>
</body>
</html>

相關文章