重温圣杯布局和双飞翼布局

最新推荐文章于 2021-06-16 04:36:28 发布

Chaney__Chen

最新推荐文章于 2021-06-16 04:36:28 发布

阅读量590

点赞数 1

分类专栏： web前端文章标签：布局 html css 前端

本文链接：https://blog.csdn.net/Chaney__Chen/article/details/53363495

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.圣杯布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin: 0;padding: 0;}
.all{height: 300px; background: pink; padding:0 200px;min-width:600px;}/*---大盒子用padding撑开两边的的位置---*/
.all .center{width: 100%; height:300px; background: orange; float: left;}

/*---左右两边的关键先是通过margin，让左右两个盒子回到正常轨道，然后就是给了相对定位，再通过left移回正确位置---*/
.all .left{width: 200px;height: 300px;background: green; float: left; margin-left: -100%; position: relative; left:-200px;}
.all .right{width: 200px;height: 300px;background: skyblue; float: right;margin-left: -200px;position: relative; left:200px;}
</style>
</head>

<body>
<div class="all">
    <div class="center">这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间这个是中间</div>
    <div class="left">这个是左边</div>
    <div class="right">这个是右边</div>
</div>
</body>
</html>

2.双飞翼布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin: 0;padding: 0;}
.all{height: 300px; background: pink;}
.all .center{width: 100%; height: 300px; background: yellowgreen; float: left;}
/*---中间盒子一开始充满整一行，然后再通过两边盒子处理布局位置，最后给中间盒子抱一个div，用margin撑开两边的内容---*/
.all .left{width: 200px;height: 300px; background: skyblue;float: left; margin-left: -100%;}
.all .right{width: 200px;height: 300px; background: orange; float: right; margin-left: -200px;}
.all .center div{margin:0 200px;}
</style>
</head>

<body>
<div class="all">
    <div class="center">
        <div>你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多你是我的小苹果，怎么爱你都不嫌多</div>
    </div>
    <div class="left">左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
</div>
</body>
</html>

最近发现圣杯跟双飞翼布局里面的内容用英文或者数字来填充的话，布局是会崩的，解决方法是英文或数字要有空格，不知道是不是占位符的问题。

Chaney__Chen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重温圣杯布局和双飞翼布局

1.圣杯布局<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin: 0;padding: 0;}.all{height: 300px; background: pink; padding:0 200px;min-width:600px;}/*---大盒子用padding撑
复制链接

扫一扫