css浮動案例
阿新 • • 發佈:2021-12-13
效果圖
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 1226px; height: 614px;background-color: pink; margin: 0 auto; } .left { float: left; width: 234px; height: 614px; background-color: purple; } .right { float: left; width: 992px; height: 614px; background-color: skyblue; } /* 親子鑑定選擇器(只選兒子) */ .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">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>