CSS两侧固定宽度⾼随⽗元素变化，中间宽度随窗⼝宽度变化⽽变化布局效果效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable"content="yes">
<meta content="telephone=yes"name="format-detection" />
<meta name="apple-mobile-web-app-status-bar-style"content="white">
<meta name="x5-fullscreen"content="true">
<meta name="apple-touch-fullscreen"content="yes">
<title>CSS两侧固定宽度⾼随⽗元素变化，中间宽度随窗⼝宽度变化⽽变化布局效果</title>
<style>
* {margin: 0;padding: 0;}
li{list-style:none;}
#Box{position: relative;padding:0 200px;}
#Box.left{position:absolute;left:0;top:0;width:200px;height:100%;background:blue;font-size:50px;color:#fff;}
#Box.right{position:absolute;right:0;top:0;width:200px;height:100%;background:blue;font-size:50px;color:#fff;}
#Box.outbox.middle{height:auto;}
#Box.outbox.middle li{display:inline-block;width:200px;height:250px;margin:10px;background:red;line-height:250px;line-height:250px;text-align </style>
</head>
<body>
<div id="Box">
<div class="left">
我是左边的内容
</div>
<div class="outbox">
<div class="middle">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
<div class="right">
css布局左边固定右边自适应我是右边的内容
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。