另类流式响应式布局(非百分比法)

这是一段非常巧妙的div+css代码,可以实现固定侧边栏宽度+内容栏流式自动缩放。之所以非常巧妙,是因为它没有用常见的百分比来布局,而是用了2点技巧来完成:

首先当margin-left为负值且大于盒子本身的宽度,且上一行的最外层盒子为浮动,且内部非浮动盒子用margin-right给盒子返回上一行预留了足够空间时,就会返回到上一行的留空位置。配合 max-width来实现非浮动盒子的流式自动缩放

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.content{max-width:1300px;}




	.wai { width:100%; height:700px; border:1px solid red; float:left;}
.left {margin-right:370px; height:700px; background:#066;}




	.right { float:left; width:370px; height:700px; background:#090; margin-left:-372px; }

</style>
<title>布局</title>
</head>

<body>




	<div class="content">
<div class="wai">
<div class="left"></div>

</div>
<div class="right"></div>
</div>
</body>
</html>
赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏