1. 程式人生 > 其它 >css浮動案例

css浮動案例

效果圖

程式碼

<!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>