css中左側固定,右側自適應


談談我開始出來工作時候的一道面試題吧

       當初我記得在太平洋網絡面試的時候,面試官給我出了這么一道題: 有一個外層的div 中間有左右兩個div 要求左側的div

        1.只告訴你寬度;       2.只告訴你高度;       3.寬度和高度告訴你;(我總結了可能的3種方式)
        HTML:
<div class="container">
<div class="left">左側固定寬度200px</div>
<div class="right">右側自適應</div>
</div>
        No1:方法一
.container{width: 100%; }
.left
{color:red; background: gray; float: left; height: 100px}//左側的div
.right
{color:red; background: blue; margin-left: -200px;}//右側的div

                    No2:方法二

.container{width: 100%;}
.left
{width:200px; background:#fcc; position:absolute; left:0 ;z-index:1 }
.right
{width:100%; background:#ccc; position:absolute; left:0}

       No3:方法三

.container{width:100%}
.left
{ background-color: green; float: left; width: 200px; margin-right: -100%; }
.right
{ float: left; width: 100%;margin-left: 200px; background-color:blue; }

                     No4:方法四

.container{width:100%}
.left
{position: absolute; top:0; left:0; width:200px; background: #ff0;}
.right
{ margin-left: 200px; background: #f0f;}

                     No5:方法5

.container{width:100%}
.left
{ position: absolute; top:0 ; left:0 ;width:200px; background:blue;}
.right
{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background:red ;}

其實還有很多方法可以實現(其它的我就懶得寫了),所謂條條大路通羅馬,咳咳,不喜勿噴


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com