CSS布局 -- 左側定寬，右側自適應

本文轉載自查看原文 2015-04-20 00:05 3867 CSS/ HTML/CSS/ 自適應/ 布局

　　左側定寬，右側自適應

有很多種方法可以實現

縮小窗口試試看？

方案一：

左邊左浮動，右邊加個margin-left

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左側定寬，右側自適應(1)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        float: left;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        margin-left:200px;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
    </div>
</body>
</html>

方案二：

左邊左浮動，右邊overflow：hidden 不過這種方法IE6下不兼容

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左側定寬，右側自適應(2)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        float: left;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        overflow: hidden;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
    </div>
</body>
</html>

方案三：

左邊使用絕對定位，右邊使用margin-left

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左側定寬，右側自適應(3)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        margin-left:200px;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
    </div>
</body>
</html>

方案四：

左邊絕對定位，右邊也絕對定位

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左側定寬，右側自適應(4)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        position: absolute;
        left: 200px;
        top:0;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
    </div>
</body>
</html>

方案五：

這種方法相對來說就有點復雜了，右邊的div里邊還有一個div

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左側定寬，右側自適應(5)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        float: left;
        margin-right: -100%;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        float: left;
        width: 100%;
    }
    .inner-right{ 
        margin-left: 200px;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <div class="inner-right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
        888888888888888888888888888888888</p>
        </div>
    </div>
</body>
</html>

免責聲明！

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

猜您在找 CSS基礎布局--居中對齊，左側定寬右側自適應 css實現兩欄布局，左側固定寬，右側自適應的7中方法 css左右布局，左側固定，右側自適應 CSS實現左側固定，右側自適應布局 CSS自適應布局(左右固定中間自適應或者右側固定左側自適應) 網頁布局——左側固定，右側自適應網頁布局-左側固定，右側自適應 css布局--兩列布局，左側固定，右側自適應（其中左側要可以拖動，右側水平滾動條） css 左側跟隨右側高度自適應 CSS左側固定寬右側自適應（兼容所有瀏覽器）