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

左右定宽，中间自适应

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

有几种方法可以实现

改变窗口大小看看？

方案一：

左右设置绝对定位，定宽，中间设置margin-left margin-right

查看 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{ 
position: absolute; 
top: 0; 
left: 0; 
width: 200px; 
border: 1px solid #333; 
background: #aaa; 
} 
.right{ 
position: absolute; 
top: 0; 
right: 0; 
width: 220px; 
background: #aaa; 
} 
.middle{  
margin-left: 200px; 
margin-right: 220px; 
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="middle"> 
<h4>middle</h4> 
<p>HHHHHHHHHHHHHHHHHHHHHH 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
HHHHHHHHHHHHHHHHHHHHHH 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
</p> 
</div> 
<div class="right"> 
<h4>right</h4> 
<p>BBBBBBBBBBBBBB 
888888888888888888 
BBBBBBBBBBBBBBBBBB 
88888888888888888888</p> 
</div> 
</body> 
</html>

方案二：

采用负边距处理。左中右都float：left;

中间的div里边再设置一个div ,外层div占满 width:100%; 内层div使用margin-left 和margin-right

左边加上负边距 margin-left:-100% 拉回最左端

右边加上负边距 margin-left:-220px (即为右边的宽度)拉回最右端

查看 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; 
margin-left: -100%; 
width: 200px; 
border: 1px solid #333; 
background: #aaa; 
} 
.right{ 
float: left; 
margin-left: -220px; 
width: 220px; 
background: #aaa; 
} 
.middle{  
float: left; 
width: 100%; 
} 
.middle-inner{  
margin-left: 200px; 
margin-right: 220px; 
border: 1px solid #333; 
background: #ccc; 
word-break: break-all; 
} 
</style> 
</head> 
<body> 
<div class="middle"> 
<div class="middle-inner"> 
<h4>middle</h4> 
<p>HHHHHHHHHHHHHHHHHHHHHH 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
HHHHHHHHHHHHHHHHHHHHHH 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
</p> 
</div> 
</div>  
<div class="left"> 
<h4>left</h4> 
<p>oooooooooooooo 
0000000000000000 
00000000000000000 
ooooooooooooooo 
ooooooooooooooo 
000000000000000</p> 
</div> 
<div class="right"> 
<h4>right</h4> 
<p>BBBBBBBBBBBBBB 
888888888888888888 
BBBBBBBBBBBBBBBBBB 
88888888888888888888</p> 
</div> 
</body> 
</html>

方案三：

左边使用float:left 右边用float:right，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>左右定宽，中间自适应(3)</title> 
<style type="text/css"> 
*{margin: 0;padding: 0;} 
.left{ 
float: left; 
width: 200px; 
border: 1px solid #333; 
background: #aaa; 
} 
.right{ 
float: right; 
width: 220px; 
background: #aaa; 
} 
.middle{  
margin-left: 200px; 
margin-right: 220px; 
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>BBBBBBBBBBBBBB 
888888888888888888 
BBBBBBBBBBBBBBBBBB 
88888888888888888888</p> 
</div> 
<div class="middle"> 
<h4>middle</h4> 
<p>HHHHHHHHHHHHHHHHHHHHHH 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
HHHHHHHHHHHHHHHHHHHHHH 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
</p> 
</div> 
</body> 
</html>

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/13185.html

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

发表回复

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

相关推荐

发表回复