左邊定寬，右邊自適應兩列布局

本文轉載自查看原文 2016-08-17 22:34 1959 左邊定寬/ css/ 布局/ 右邊自適應兩列布局

最近剛剛面試，面試題中有個左邊定寬，右邊自適應兩列布局，我寫完了面試官問我，這樣可以嗎？我說應該可以吧，其實我也不知道，回來后敲代碼，驗證，果然，我答錯了，然后通過我的不懈努力，終於，你懂的。。。下面我把代碼附上

這道題，看起來很簡單，其實不然，小弟不才，想出了三種方法可以實現

第一：采用浮動元素，當然也得清浮動嘍，左邊浮動，右邊用margin-left,，看淡word-break:break-all了沒，是強制讓內容換行，要不就跑遠了。。。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左側定寬，右側自適應(1)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    div.contain{overflow: auto;zoom:1; background: yellow;}
    div.left{float: left;width: 200px;height: 400px;background: red; word-break: break-all;}
    div.right{margin-left:200px; height: 400px;  background: blue; word-break: break-all;}
</style>
</head>
<body>
<div class="contain">
    <div class="left"><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
    </div>
    <div class="right">
    11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;
    </div>
</div>
123
</body>
</html>

第二種：用相對定位,左邊用position：absolute，右邊用margin-left,其實跟浮動定位差不多，不過我也貼出來

<!doctype html>
<head>
<meta charset="utf-8">
<title>左側定寬，右側自適應(2)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    div.contain{overflow: auto;zoom:1; background: yellow; position: relative;}
    div.left{ position: absolute; left: 0;top: 0; width: 200px;height: 400px;background: red; word-break: break-all;}
    div.right{margin-left:200px; height: 400px;  background: blue; word-break: break-all;}
</style>
</head>
<body>
<div class="contain">
    <div class="left"><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
    </div>
    <div class="right">
    11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;
    </div>
</div>
123
</body>
</html>

第三種：左邊和右邊都用相對定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左側定寬，右側自適應(3)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    div.contain{background: yellow; position: relative; height: 400px;}
    div.left{ position: absolute; left: 0;top: 0; width: 200px;height: 400px;background: red; word-break: break-all;}
    div.right{position: absolute; left: 200px;top: 0; height: 400px;  background: blue; word-break: break-all;}
</style>
</head>
<body>
<div class="contain">
    <div class="left"><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
    </div>
    <div class="right">
    11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;
    </div>
</div>
123
</body>
</html>

最后，如果有更好更多的方法，願您能告訴我一聲。。。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 左邊定寬，右邊自適應布局的幾種方法兩列布局，左邊固定，右邊自適應的三種方法 css 關於兩欄布局，左邊固定，右邊自適應 CSS 布局實例系列（二）如何通過 CSS 實現一個左邊固定寬度、右邊自適應的兩列布局 CSS: 實現兩欄布局，左邊固定，右邊自適應的4種方法 div css左邊固定右邊自適應布局布局-兩列布局（一列定寬，一列自適應） flex布局左邊固定，右邊自適應，右邊內容超出會影響布局兩列自適應布局兩列布局中單列定寬單列自適應布局的6種思路