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

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论