在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ css實(shí)現(xiàn)兩欄，右邊固定寬度，左邊自適應(yīng)

css實(shí)現(xiàn)兩欄，右邊固定寬度，左邊自適應(yīng)

這是實(shí)現(xiàn)左邊固定200px，右邊自適應(yīng)的例子

css：
.left {
        float: left;
        width: 200px;
        height: 100px;
        background: #0FF;
    }
.right {
        margin-left: 200px;
        height: 100px;
        background: #CF0;
    }
html：
<div class="parent">
   <div class="left"></div>
   <div class="right"></div>
</div>

顯示很正常，

圖片描述

然后我仿照著寫右邊固定，左邊自適應(yīng)

    .left1 {
        margin-right: 200px;
        height: 100px;
        background: #CF0;
    }

    .right1 {
        float: right;
        width: 200px;
        height: 100px;
        background: #0FF;
    }

然后就顯示成這樣了，

圖片描述

想知道這是為什么，
各種瀏覽器也都試過了
然后我嘗試把.left加上float：left
左側(cè)寬度直接變成0了，這是為什么？
前端剛?cè)肟樱容^迷糊，麻煩大佬幫忙看看，萬分感謝，

圖片描述

回答
編輯回答
醉淸風(fēng)

你把你的html中的兩個(gè)div元素位置換一下就可以了

2018年1月19日 23:20
編輯回答
青裙

同小白。div是塊級(jí)元素，就是他的display為block。塊級(jí)元素自占一行。你可以想象每個(gè)div后面都默認(rèn)隱藏了一個(gè)換行符。這導(dǎo)致下一個(gè)元素會(huì)換行顯示。浮動(dòng)則會(huì)清除掉這個(gè)隱藏的換行符。
例子一中的left盒子添加了float屬性，right盒子就認(rèn)為left盒子不存在，往上擠，然后又設(shè)置了margin-left,這樣right盒子往右偏，結(jié)果就是最后顯示兩個(gè)盒子并排顯示并占滿一行。
例子二的left盒子沒有設(shè)置float屬性，是一個(gè)塊級(jí)元素，自帶換行。所以你的right盒子不會(huì)和left盒子同行顯示。
加入了float后顯示寬度為0是因?yàn)槟銢]有給盒子設(shè)計(jì)寬度。

要實(shí)現(xiàn)自適應(yīng)，可以試試flex布局。

html:

<div class="parent">
  <div class="left">1</div>
 <div class="right">2</div>
</div>

css:

.parent1{
    display: flex;
}
.left {
    width: 200px;
    height: 100px;
    background: red;
  }
.right {
    flex: 1;
    height: 100px;              
    background: blue;
 }

想要哪個(gè)盒子自適應(yīng)，就在哪個(gè)盒子的樣式下加flex:1并取消另外一個(gè)盒子的flex就好

2017年7月13日 12:40
編輯回答
耍太極

同樓上，樓上們說的都對(duì)，關(guān)于BFC可以看看這個(gè)，https://www.w3.org/TR/CSS2/vi...

2018年4月19日 05:45
編輯回答
毀與悔

顯示效果要在同一行的，如果其中不全為浮動(dòng)元素，浮動(dòng)元素要先寫，不然會(huì)被未浮動(dòng)的元素占據(jù)后再浮動(dòng)，顯示出來的效果就是不在同一行了。

2017年11月22日 10:45
編輯回答
離觴

樓上說的都很對(duì)，你理解以后推薦一篇文章
http://www.zhangxinxu.com/wor...

2018年4月21日 07:26
編輯回答
生性

給一種我一直用的，無論左邊多少，最后一個(gè)自適應(yīng)：
左邊的全部float:left;
最后一個(gè)overflow:hidden;
當(dāng)然別忘了父級(jí)也overflow:hidden;

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>無標(biāo)題文檔</title>
</head>

<body>
    <style>
        div{height:100px;}
        .box{overflow:hidden;width:400px;height:100px;border:#000 solid 1px;margin:20px auto;}        
        .t1{width:100px;float:left;background:#dd4215;}
        .t2{width:150px;float:left;background:#000;}
        .t3{overflow:hidden;background:#0F6;}
    </style>
    <div class="box">
        <div class="t1"></div>
        <div class="t2"></div>
        <div class="t3"></div>
    </div>
</body>
</html>
2017年9月20日 00:37