css 一个div里套了四个小div 如何让他们自动分配间距,高度被设定的情况下。
<divstyle="width:200px;height:200px;"><divstyle="width:200px;height:20px;">fdsfas</di...
<div style="width:200px;height:200px;">
<div style="width:200px;height:20px;">fdsfas</div>
<divstyle="width:200px;height:20px;">fdsfas</div>
<div style="width:200px;height:20px;">fdsfas</div>
<div style="width:200px;height:20px;">fdsfas</div>
</div>
没说清楚,我这个现在是垂直的,要垂直间距自动分配。 展开
<div style="width:200px;height:20px;">fdsfas</div>
<divstyle="width:200px;height:20px;">fdsfas</div>
<div style="width:200px;height:20px;">fdsfas</div>
<div style="width:200px;height:20px;">fdsfas</div>
</div>
没说清楚,我这个现在是垂直的,要垂直间距自动分配。 展开
6个回答
展开全部
利用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几年了,没做过这事!
垂直也不会自动分配啊。如果能自动的话那估计得借助JS了!反正我玩CSS几年了,没做过这事!
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
把他们的宽都设成百分比的 25%即可
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
分别给父级和子级div设置class吧
margin或者padding这些属性你自己看着用
margin或者padding这些属性你自己看着用
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询