<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>兩列</title> <style> .container{ height: 1000px; width: 1000px; /* display: inline-block; */ position: relative; margin: 0 auto; border: 1px solid #fcc; /* text-align: center; */
} .box1{ border: 1px solid red; float:left; width: 30%; height: 100%; } .box2{ border: 1px solid blue; float:left; width: 60%; height: 100%;
} .clearfix{ clear: both;
} .box3{ border: 1px solid green; float:left; width: 60%; height: 300px; border-radius: 10px;
} </style> </head> <body> <div class="container"> <div class="box1">
</div> <div class="box2">
</div> <div class="box3">
</div>
</div> </body> </html>
