【转】使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

 原文地址：https://blog.csdn.net/cinderella_hou/article/details/52156333

<html>
<head>
<style type="text/css">
#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}
</style>
</head>
<body>
        <div id = "box">
             <div id = "left_box"></div>
             <div id = "center_box"></div>
             <div id = "right_box"></div>
        </div>
</body>
</html>

效果：两边固定，中间缩放

 

posted @ 2018-12-29 16:44  花影疏帘  阅读(105)  评论(0)    收藏  举报