display box-阿里巴巴前端在线笔试题

下图绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

已知HTML结构是:
<div>
<div>column 1</div>
<div>column 2</div>
<div>column 3</div>
</div>

在网上找到如下一种写法:
<html lang=”en” >
<head>

<title>demo</title>

<style type=”text/css”>
*{
margin:0;
padding:0;
}

.box{
width:100%;

background:green;
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
overflow:hidden;
-webkit-box-orient:horizontal;
}

.item{
-moz-box-flex:1; /* Safari 和 Chrome */
-webkit-box-flex:1; /* Safari 和 Chrome */
box-flex:1; /* Safari 和 Chrome */
height:60px;
background:gray;
margin:10px 0 ;
}
.item:first-child{
width:200px;
-webkit-box-flex:0; /* Safari 和 Chrome */
margin:10px;

}
.item:last-child{
margin:10px;
}
</style>
</head>
<body >
<div class=”box”>
<div class=”item”>column 1</div>
<div class=”item”>column 2</div>
<div class=”item”>column 3</div>
</div>

</body>
</html>

效果如图:

关键点有两个:

1.css3的box-flex属性:

box-flex 属性规定框的子元素是否可伸缩其尺寸。它将规定框的子元素按比例划分。在这个例子里,column1划分的宽度为0,column2和column3划分的宽度都为1,所以column2和column3是等宽的。column1的宽度由固定宽度决定。

2.css3选择器

box里的三个div的class都是item,所以用了:first-child,:last_child选择器

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注