-
float:left;text-align:left浮動：左；文本對齊：左 float:right;text-align:right浮動：右；文本對齊：右查看全部
-
相對定位（position：relative），不可以脫離文本流查看全部
-
三列布局，左邊和右邊固定，中間自適應： .left{width:200px;height:500pxbackground:#ccc;position:absolute;left:0;top:0;} .middle{height:500pxbackground:#999;margin:0 300px 0 200px} .left{width:200px;height:500pxbackground:#ddd;position:absolute;right:0;top:0;}查看全部
-
margin:0 auto實現居中0是代表上下，auto是代表左右查看全部
-
方法二：三列布局方法clone。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局編程挑戰</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;background:#ccc;} .main{height:500px;background:red;} .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:100px} .right{height:500px;background:green;margin:0 0 0 210px} .foot{height:50px;background:#f63} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局編程挑戰</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;background:#ccc;} .main{height:500px;background:red;} .left{width:200px;height:500px;background:blue;float:left} .right{width:80%;height:500px;background:green;float:right} .foot{height:50px;background:#f63;clear:both} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
混合布局查看全部
-
左右定寬的三列布局查看全部
-
三列布局查看全部
-
固定寬度的二列布局查看全部
-
自適應二列布局查看全部
-
一列布局查看全部
-
也可以使用CSS表格布局實現~查看全部
-
kjh查看全部
-
實踐題之混合布局。查看全部
舉報
0/150
提交
取消