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

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

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>

顯示很正常，

圖片描述

然后我仿照著寫右邊固定，左邊自適應

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

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

然后就顯示成這樣了，

圖片描述

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

圖片描述

回答

編輯回答

醉淸風

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

2018年1月19日 23:20

編輯回答

青裙

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

要實現(xiàn)自適應，可以試試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;
 }

想要哪個盒子自適應，就在哪個盒子的樣式下加flex:1并取消另外一個盒子的flex就好

2017年7月13日 12:40

編輯回答

耍太極

同樓上，樓上們說的都對，關于BFC可以看看這個，https://www.w3.org/TR/CSS2/vi...

2018年4月19日 05:45

編輯回答

毀與悔

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

2017年11月22日 10:45

編輯回答

離觴

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

2018年4月21日 07:26

編輯回答

生性

給一種我一直用的，無論左邊多少，最后一個自適應：
左邊的全部float:left;
最后一個overflow:hidden;
當然別忘了父級也overflow:hidden;

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>無標題文檔</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