时间：2023-09-02 23:12:02 | 来源：网站运营
时间：2023-09-02 23:12:02 来源：网站运营
几种常用的响应式布局方案：
在线咨询
float布局float<body> <div class="left"></div> <div class="right"></div> <div class="center"></div></body><style> .left { background-color: pink; width: 100px; float: left; height: 500px; } .right { background-color: blueviolet; width: 100px; float: right; height: 500px; } .center { height: 500px; overflow: hidden; background-color: yellowgreen; }</style>流体布局margin<body> <div class="left"></div> <div class="right"></div> <div class="center"></div></body><style> .left { background-color: pink; width: 100px; height: 500px; float: left; } .right { background-color: blueviolet; width: 100px; height: 500px; float: right; } .center { height: 500px; margin: 0 100px; background-color: yellowgreen; }</style>圣杯布局padding预留左右两侧。margin和相对left移动到同一行。<body> <div class="container"> <div class="center"></div> <div class="left"></div> <div class="right"></div> <div style="clear: both;"></div> </div></body><style> .container { min-width: 800px; padding-left: 200px; padding-right: 200px; } .center { float: left; background-color: tomato; height: 500px; width: 100%; } .left { float: left; background-color: yellowgreen; width: 200px; height: 500px; position: relative; margin-left: -100%; left: -200px; } .right { float: left; background-color: pink; width: 200px; height: 500px; margin-left: -200px; position: relative; right: -200px; }</style>问题：为什么设置左右是position:relative？position:fixed/absolute时元素已脱离文档流，float失效。position:relative/static时元素正常位于文档流，float有效。margin来撑开宽度。relative的位置，只需使用负值margin调整至同一栏即可<body> <div class="container"> <div class="center"></div> </div> <div class="left"></div> <div class="right"></div></body><style> body{ min-width: 400px;; } .container { float: left; width: 100%; } .center { height: 500px; background-color: tomato; margin-left: 200px; margin-right: 200px; } .left { height: 500px; float: left; width: 200px; background-color: thistle; margin-left: -100%; } .right { height: 500px; float: left; width: 200px; background-color: turquoise; margin-left: -200px; }</style><body> <div class="container"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div></body><style> .container { display: flex; } .center { flex: 1 1 200px; background-color: turquoise; height: 500px; } .left { order: -1; flex: 0 0 200px; height: 500px; background-color: thistle; } .right { flex: 0 0 200px; height: 500px; background-color: wheat; }</style>position。左右绝对定位到边缘。中间使用margin撑开。<body> <div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div></body><style> .container { position: relative; } .center { margin: auto 200px; background-color: turquoise; height: 500px; } .left { position: absolute; left: 0; top: 0; width: 200px; height: 500px; background-color: thistle; } .right { position: absolute; right: 0; top: 0; width: 200px; height: 500px; background-color: wheat; }</style>网格Grid布局CSS3新增的grid布局。<body> <div class="container"> <div style="background-color: wheat;"></div> <div style="background-color: turquoise;"></div> <div style="background-color: tomato;"></div> </div></body><style> .container { display: grid; grid-template-columns: 200px auto 200px; grid-template-rows: 200px; }</style>猛虎分享关键词：布局,方案,响应
