-
注意margin属性是上右下左，不要弄反了！ 答案： .left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}查看全部
-
1.三列固定宽度：使用浮动float就可以实现，前两列左浮动float:left;三列设置左右浮动都可以。 2.左右两列固定，中间自适应：左右两列设置固定宽度像素,左100px 右200px ，中间不设置宽度，并去除浮动。 并设置左右两列为绝对定位的固定定位position:absolute;左边top:0;left:0;右边top:0;right:0; 由于是绝对定位position脱离正常文档流，左右两列有了z-index属性。 中间列就显示在下面，并占满整行，设置左右边距，为左右的宽度，如果希望和左右两列有间距，可以增加左右边距，margin:0 205px 0 105px;查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 浮动（float），绝对定位（position:absolute）和固定定位（position：fixed）可让元素脱离文档流，即元素移位后不占原区域； 但不同是：absolute元素会遮挡其他元素，而float不会。 相对定位（position:relative）不能脱离。查看全部
-
自适应：布局大小会随浏览器的大小变化 两列布局 1.浮动：布局一般使用层div，这是块级元素，会占用整行。要两列在同一行显示，就需要设置浮动float。 2.宽度：可以设置固定宽度，也可以设置百分比[自适应宽度]，会根据浏览器的宽度变化而变化。 3.浏览器居中：如需居中，可以在两列外面包含一层容器，并设置宽度，使用margin:0 auto水平居中显示。 【根据百分比设置使宽度自适应】 css .main{ width:960px; height:600px; margin:0 auto} .left{width:20%;height:500px;float:left;backgroung:gray;} .right{width:80%;height:500px;float:right;backgroung:blue;} html <div class="main"> <div class="left">left</div> <div class="right">right</div> </div>查看全部
-
三列布局。自适应。查看全部
-
用main相对定位控制left和right绝对定位 .top{width:100%;height:100px;background:#666} .main{height:400px;position:relative;top:10px;background:red} .left{height:100%;width:200px;position:absolute;background:blue} .right{height:100%;margin-left:210px;background:green} .foot{width:100%;height:200px;background:orange;margin-top:20px}查看全部
-
注意margin属性是上右下左，不要弄反了！ 答案： .left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}查看全部
-
top head其实是块级元素，并不是行级元素。它的高度一直都在文本流中，也就是说100px肯定在的。然后我在回答你的问题：为什么是600px而不是700px,首先main并没有设置高度，它的高度来自于自适应，被内部的两个元素撑大的，内部两个元素是浮动的，所以它们其实不在文本流中占空间。我的意思是说：main的高度在文本流中不占位置，即为 0px,然后margin是指和相邻容器的距离，所以你的footer 的值实际上是从top head开始往下算的，因为你的目的是不留白，所以你的margin值和main的显示高度要一致，main的撑大高度是600px，所以你的margin值应该写600px正好合适。你可以自己将你的数字改为0px用盒子看一下。希望能帮到你查看全部
-
下面有位兄弟说不能自动换行大概和我踩了一样的坑，那就是输入数字或者纯字母了，因为一串数字或者一串字母是被当做一个整体的，所以浏览器默认不会破坏它的完整性所以不会换行，想换行的话需要增加这个属性word-wrap: break-word;就可以了查看全部
-
清除默认设置 body{padding:0; margin:0}查看全部
-
三列布局，左边绝对定位，右边绝对定位，中间margin一些值。查看全部
-
哪两个 css 设置，可以让元素脱离文档流？ 浮动（float）和 绝对定位（position：absolute）查看全部
-
本课程分1列布局margin，2列布局float，3列布局position+margin，混合布局讲的。 移动端布局，这个看熟了就差不多了。查看全部
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局</title> <style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; margin:0 auto;} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; float:left;} .right{ width:740px; height:600px;background:#FCC; float:right} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left} .r_sub_right{ width:200px; height:600px; background:#9FC; float:right;} .footer{ height:50px; background:#9F9;clear:both;} </style> </head> <body> <div class="top"> <div class="head">head</div> </div> <div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div> </div> <div class="footer">footer</div> </body> </html>查看全部
-
设置左侧绝对定位。查看全部
举报
0/150
提交
取消