CSS3:三个矩形,一个宽200px,其余宽相等且自适应满铺

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

这里要用到的CSS3特性box-flex

box-flex :属性规定框的子元素是否可伸缩其尺寸。可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间。 

此外,元素的可伸缩行柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

 

思路:

1.定义如下html:

<body>
<div class="box">
<div class="item">column1</div>
<div class="item">column2</div>
<div class="item">column3</div>
</div>
</body>

2.对column1设置固定宽度,box-flex:0(表示固定宽度,不参与自适应宽度)width:200px;

3.对column2  column3设置box-flex:1(按照比例1自适应宽度);

css代码如下:

<head>
    <style type="text/css">
    .box {
        background-color:green;
        display:-moz-box;
        display:-webkit-box;
        display:box;
        height:50px;
        line-height:30px;
        text-indent:10px;
    }
    .item {
        box-flex:1;
        -moz-box-flex:1;
        -webkit-box-flex:1;
        margin:10px;
        background:#fff;
        text-align:center
    }
    .item:first-child {
        box-flex:0;
        -moz-box-flex:0;
        -webkit-box-flex:0;
        width:200px;
        background:#fff;
        margin:10px;
        text-align: left;
    }
    .item:nth-child(2) {
        margin:10px 0
    }
    </style>
</head> 

看看它的显示效果:

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。