css 一个div里套了四个小div 如何让他们自动分配间距，高度被设定的情况下。
作者&投稿：局振 （若有异议请与网页底部的电邮联系）
1、首先需要打开自己电脑上的DW软件，然后新建一个html页面，并保存在桌面上。
2、然后需要在该html页面的body部分敲入部分代码，基本上就是一个父级DIV下面有三个子级DIV。
3、然后在三个子div中输入文字，在浏览器中测试，查看效果，可以看到默认情况下三个div是竖排显示的。
4、接下来要这四个div赋予class属性，使之具有不同的样。
5、然后为三个中的前两个设置float:left属性，最后一个设置float:right属性，或者是float:left属性，都可以。
6、之后再到浏览器中查看，就可以发现三个div并排显示了。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的标签中，输入css代码：.sub{margin-top: 30px;}。
3、浏览器运行index.html页面，此时3个div子子容器的垂直间距被统一设置为了30px。
利用CSS3 新添加的盒子模型属性 box-flex；可以让子容器针对父容器的宽度按一定规则进行划分。ie 目前不支持，估计后续版本会兼容这个属性。
必须在父元素上面加上display:box; 才可以对子元素进行规则划分。
box-flex:1;这里的 1 指的是比例 。
如：
<!DOCTYPE html>
<head>
<title></title>
<style>
.box {
width: 200px; /*宽度没有限制*/
height: 200px;
display: -webkit-box; /*这个必须要有*/
-webkit-box-orient:vertical; /* 默认横向划分 vertical 为纵向划分*/
}
.box div{
height:100%;
}
.div1{
background-color:red;
-webkit-box-flex:1;
}
.div2{
background-color:blue;
-webkit-box-flex:1;
}
.div3{
background-color:green;
-webkit-box-flex:1;
}
.div4{
background-color:darkblue;
-webkit-box-flex:1;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
<div id="a">
<div class="b">fdsfas</div>
<div class="b">fdsfas</div>
<div class="b">fdsfas</div>
<div class="b">fdsfas</div>
</div>
#a{width:200px; height:200px;}
.b{width:200px; height:20px; margin:10px auto;}
DIV是不会像TABLE那样的，宽度还是定义死的好，或者子继承父。为了IE6及其他浏览器都是最好定义死宽度的。
垂直也不会自动分配啊。如果能自动的话那估计得借助JS了！反正我玩CSS几年了，没做过这事！
把他们的宽都设成百分比的 25%即可
分别给父级和子级div设置class吧
margin或者padding这些属性你自己看着用
霜空明真： <html><head><meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ /><title>无标题文档</title><style type=＂text/css＂>.big{ display:block; min-height:500px; position:relative; width:500px;}.left1{ display:block; height:50px; width:...
昌都县13694045998： 我在一个大的DIV中并排放置了4个小的DIV,怎么样在这4个小的DIV下方放置一条线以将上面的4个小DIV分开? - ？
霜空明真： <html><body><div style=＂border:1px solid; width:25%; float:left＂>1</div><div style=＂border:1px solid; width:25%; float:left＂>2</div><div style=＂border:1px solid; width:25%; float:left＂>3</div><div style=＂border:1px solid; width:25%; float:left＂...
昌都县13694045998： 一个大的div套三个小div,如何让三个小div平均分配???? - ？
霜空明真： 1、首先需要打开自己电脑上的DW软件,然后新建一个html页面,并保存在桌面上. 2、然后需要在该html页面的body部分敲入部分代码,基本上就是一个父级DIV下面有三个子级DIV. 3、然后在三个子div中输入文字,在浏览器中测试,查看效果,可以看到默认情况下三个div是竖排显示的. 4、接下来要这四个div赋予class属性,使之具有不同的样. 5、然后为三个中的前两个设置float:left属性,最后一个设置float:right属性,或者是float:left属性,都可以. 6、之后再到浏览器中查看,就可以发现三个div并排显示了.
昌都县13694045998： javascript中div形成的大层套着4个小层,形成田字格,大层能拖动,其所包围的小层也一样跟着移动吗? - ？
霜空明真： div层里边的所有元素都会一起移动
昌都县13694045998： css中div的嵌套问题?基本情况是 div1中嵌套了div2和div3 代码如下 - ？
霜空明真： z-index 这个不需要写DIV的层级关系,也能做到.如果你用定位,那就把DIV3的TOP减小一点就回来了.我 用的方法是,你可以为DIV1设定一个填充,那么DIV2就定位了,然后再写DIV3的上边距,这样你想要多远就有多远了.不要写DIV2的下边距,因为上面的下边距和下面的上边距会合并,而不是相加.
昌都县13694045998： 1个大div,4个小div,让4个小div置于大div的中间,上面2个,下面2个. - ？
霜空明真： <style type=＂text/css＂> .max{ text-align:center; /*文字水平居中*/ line-height:100px; /*文字垂直居中*/ width:200px; height:300px; border:1px solid red; } .top1{ text-align:center; width:100px; height:100px; background:#069; float:left; margin-top:50...
昌都县13694045998： div+css中上一个div会把下一个div覆盖住,为什么 - ？
霜空明真： div覆盖着另一个div,是因为其中一个或者两个脱离了文档流.常见脱离文档流主要原因有:1. div浮动造成,常用解决方法是清除浮动2. div受到相对定位或者绝对定位的影响,定位是可以设置left,right,bottom,top,等位置样式的,解决方法一般是清除定位,或者解决兼容性,合理控制left,right ,bottom,top四个属性的值. 另外还有一种不常见的情况,例如margin的负数值,可以造成div偏离原来的位置,建议合理设置即可.
昌都县13694045998： CSS: 一个父div里有5个子div,5个子div三个百分比宽度,两个固定宽度,都浮动,请问如何才能让最后一个d - ？
霜空明真： 可以全部左浮动,使最后一个宽度是父div减去前面四个子div的宽度,只是不要忘记浮动的清除.
昌都县13694045998： 大DIV里有多个小的DIV,要怎么实现小的DIV并排排列,居中!小DIV设置了float:left - ？
霜空明真： 实现起来也比较简单,主要是通过设置容器的padding,不过内部子元素的宽度要经过计算,不能随意设置,另外,text-align可以实现文本的居中对齐 demo效果如下,ie7下也是正常的 <!doctype html> <html> <head> <meta charset=＂utf-8＂> ...
昌都县13694045998： dreamweaver中在一个div标签内添加多个div标签如何排列 - ？
霜空明真： 排列方法可以用,以下方式, 1 2 3 4 5 6<divclass=＂Wrap＂><divclass=＂Box＂></div><divclass=＂Box＂></div><divclass=＂Box＂></div><divclass=＂Box＂></div> </div> 如果需要让内部div并排显示可以添加1.Box{float:left; width:25%;}
