有关自融入合理布局的解决(运用波动和margin负边

2021-01-20 21:18 jianzhan
自融入合理布局在具体运用中愈来愈广泛了,今日共享几个自融入合理布局的demo,关键是波动圣杯合理布局(也叫双飞翼合理布局,关键是运用波动和margin负边距完成的),沒有详细介绍肯定精准定位合理布局,全是我想,你能搞清楚我下面的几个事例,肯定精准定位合理布局也是是非非常的简易了。

PS:圣杯合理布局有个益处,合乎前端开发开发设计中渐进提高的理念,由于访问器分析是从DOM的上至下,圣杯合理布局可以把网页页面中关键的內容section放到DOM前面先分析,而主次的aside內容则放在DOM后边后分析。
下面的事例可以处理具体运用中绝大部分的自融入合理布局难题了,有兴趣爱好的童鞋能够科学研究下,编码以下:

1.左侧固定不动,右侧自融入(圣杯合理布局的完成):

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻">
<title>无题目文本文档</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:⑴00%}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="right">aside</div>
</body>
</html>

2.右侧固定不动,左侧自融入(圣杯合理布局的完成):

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻">
<title>无题目文本文档</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-right:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:⑵00px;}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="right">aside</div>
</body>
</html>

3.左侧和右侧固定不动,正中间自融入:

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻">
<title>无题目文本文档</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px;margin-right:200px}
.left{ width:200px; height:300px; float:left; background:yellow; margin-left:⑴00%}
.right{ width:200px; height:300px; background:red; float:left; margin-left:⑵00px}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="left">aside</div>
<div class="right">aside</div>
</body>
</html>