-
三列布局比较特殊的例子，让左右列固定列宽，中间自动适应宽度，需要用到position，不能用float（float会导致页面凌乱）<br> .left{width:200px;height:500px;background:red;position:absolute;left:0}<br> .middle{height:500px;background:green;margin:0 300px 0 200px}（这里4个值代表上边距、右边距、下边距、左边距）<br> .right{width:300px;heigth:500px;backgroud:blue;position:absolute:right;right:0}查看全部
-
float:left/right左右浮动，两列布局可用到查看全部
-
固定化两列布局；查看全部
-
自适应两列布局；查看全部
-
网页的基本布局查看全部
-
margin:0 auto;使块元素水平居中，0代表上下，auto代表左右查看全部
-
自适应的盒子设置宽度和高度时是用%x来设置的查看全部
-
清楚浮动的方法综合一下答案： 一：clear:both(/left/right); 二：overflow:hidden;width:100%; 三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0; 推荐使用方法一和方法二，在给footer使用overflow的时候，千万不要忘记设置它的宽度。查看全部
-
有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
各种测试发现,在用position做三列布局的时候,中间设置margin自适应宽度,左右两边固定宽度必须设置一样的才会得到结果, body{ margin:0; padding:0; font-size:30px; font-weight:bold} .left{width:200px; height:600px; background:#ccc; position:absolute;left:0; top:0} .main{height:600px;margin:0 210px 0 210px;background:#9CF} .right{height:600px; width:200px; position:absolute; top:0;right:0;background:#FCC;} 如果两边固定宽度值不一样的话,就会出现中间自适应部分与右边布局重叠,而与左边布局中间很大空白,求大神解答一下是什么情况,我是新手,勿喷查看全部
-
<!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;width:600px;margin:0 auto;background:#ccc;} .main{height:500px;width:600px;background:#F60;margin:0 auto;} .left{height:500px;width:200px;background:blue;float:left;} .right{height:500px;width:390px;background:green;float:right;} .foot{height:80px;width:600px;background:#369;margin:0 auto;} </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>查看全部
-
上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。 解决方法有两个：1.清除浮动， clear:both; 2.为main设置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; } (from秋雨梧桐叶落时0)查看全部
-
三列布局自适应查看全部
-
左右浮动样式设置查看全部
-
分栏又称为分列，常见的布局分为：一列布局，二列布局，三列布局和混合布局查看全部
举报
0/150
提交
取消