div 實現田字格佈局
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>
相關文章
- div 裡套 span 會在同一行顯示。div 裡套 div 會分不同行顯示。這樣也能實現田字格佈局
- CSS實現三列DIV等高佈局CSS
- 網頁佈局實現之div垂直居中網頁
- div佈局
- div佈局小技巧
- DIV+CSS佈局CSS
- React 實現炫酷的可拖拽網格佈局React
- CSS Grid 網格佈局實現自適應9宮格CSS
- css+div佈局案例CSS
- 佈局總結-水平居中佈局的實現
- CSS佈局——div居中方法CSS
- div+css佈局注意點CSS
- css網格佈局的最佳實踐CSS
- CSS網格佈局CSS
- [譯] 使用 CSS 網格佈局實現響應式圖片CSS
- CSS實現的網頁柵格佈局簡單介紹CSS網頁
- 聖盃佈局進階版-flex佈局實現Flex
- canvas田字格效果程式碼例項Canvas
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- 分享div css佈局案例的目的CSS
- CSS多種佈局方式自我實現-水平佈局(二)CSS
- Flutter一步步實現x程GridNav網格佈局_hotel佈局與完結Flutter
- iOS 中使用 FlexBox 佈局實現圖片九宮格iOSFlex
- GridPane網格佈局
- grid網格佈局
- jQuery實現瀑布流佈局jQuery
- Grid 拖拽佈局實現
- css佈局-實現左中右佈局的5種方式CSS
- 使用 CSS columns 佈局來實現自動分組佈局CSS
- div css左右佈局例項程式碼CSS
- CSS+DIV佈局三種定位方式CSS
- HTML使用div和table進行佈局HTML
- 網格佈局管理器
- CSS Grid 網格佈局CSS
- 使用flex 實現聖盃佈局Flex
- GridView實現方塊佈局View
- 用flex佈局實現Sticky FootersFlex
- 使用 position:sticky 實現粘性佈局