用CSS3 box-flex 无法实现三栏垂直布局,上下层固定,中间层自适变化 15
我用CSS3做一个手机WEB网页，想垂直中间层自适应,上下都固定高度，中间层随着屏幕大小变化而变化/各位看官帮忙看一下哈<!DOCTYPEHTML><html><head...
我用CSS3做一个手机WEB网页，想垂直中间层自适应,上下都固定高度，中间层随着屏幕大小变化而变化 /
各位看官帮忙看一下哈
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3三栏布局</title>
<style type="text/css">
.box {
display:box;
display:-webkit-box;
display:-moz-box;
background-color:#fff;
border:1px solid #333;
margin:0 auto;
box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient:vertical;
}
.col_1 {
width:100px;
background-color:#ffc;
}
.col_2 {
background-color:#ccf;
box-flex:1;
-moz-box-flex:1;
-webkit-box-flex:1;
}
.col_3 {
background-color:#fcf;
width:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="col_1">111</div>
<div class="col_2">222</div>
<div class="col_3">333</div>
</div>
</body>
</html> 展开
各位看官帮忙看一下哈
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3三栏布局</title>
<style type="text/css">
.box {
display:box;
display:-webkit-box;
display:-moz-box;
background-color:#fff;
border:1px solid #333;
margin:0 auto;
box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient:vertical;
}
.col_1 {
width:100px;
background-color:#ffc;
}
.col_2 {
background-color:#ccf;
box-flex:1;
-moz-box-flex:1;
-webkit-box-flex:1;
}
.col_3 {
background-color:#fcf;
width:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="col_1">111</div>
<div class="col_2">222</div>
<div class="col_3">333</div>
</div>
</body>
</html> 展开
7个回答
展开全部
box属性是一行分多列，而你的需求相当于三行，因此，使用box不适合。
建议：
使用3个长度100%的主div进行布局；
使用CSS定位控制(position属性)固定上下两个div 。
至于居中（因为是100%的长度，居中没有意义，如果主div的宽度小于100%则需要类似下面的css进行控制）：
.box{
width:960px;
margin:0 auto;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
vertical：从上向下垂直排列子元素。
horizontal：在水平行中从左向右排列子元素。
至于为什么火狐用了-webkit-box-orient，这个就说不清楚，如果你是用chrome的话，那是因为-webkit-box-orient:vertical;这句。
horizontal：在水平行中从左向右排列子元素。
至于为什么火狐用了-webkit-box-orient，这个就说不清楚，如果你是用chrome的话，那是因为-webkit-box-orient:vertical;这句。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
看你代码似乎要实现的是三栏水平布局，如果是的话：
.box 属性中 -webkit-box-orient:vertical; 应该为 -webkit-box-orient: horizontal;
.box 属性中 -webkit-box-orient:vertical; 应该为 -webkit-box-orient: horizontal;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="container">
<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>
</div>
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
#top {
height: 50px;
background-color: red;
}
#middle {
flex: 1;
background-color: green;
}
#bottom {
height: 50px;
background-color: blue;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
父元素{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
子元素{-webkit-box-flex:1.0;-moz-flex-grow:1;-webkit-flex-grow:1;flex-grow:1;-moz-flex-shrink:1;-webkit-flex-shrink:1;flex-shrink:1;}
上面是兼容的写法
你在设置box-flex的时候忽略了flex-grow
还有父元素要设置高度 你的.box没有设置高度
如果还是没效果你可能得查看一下浏览器的兼容问题
子元素{-webkit-box-flex:1.0;-moz-flex-grow:1;-webkit-flex-grow:1;flex-grow:1;-moz-flex-shrink:1;-webkit-flex-shrink:1;flex-shrink:1;}
上面是兼容的写法
你在设置box-flex的时候忽略了flex-grow
还有父元素要设置高度 你的.box没有设置高度
如果还是没效果你可能得查看一下浏览器的兼容问题
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
