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/13186.html

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

发表回复

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

相关推荐

发表回复