CSS布局 -- 左侧定宽，右侧自适应详解编程语言

　　左侧定宽，右侧自适应

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>

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/industrynews/13186.html

CSS布局 — 左侧定宽，右侧自适应详解编程语言

发表回复

CSS布局 — 左侧定宽，右侧自适应详解编程语言

相关推荐

发表回复