三栏布局之双飞翼布局

最新推荐文章于 2022-06-28 17:13:51 发布

兰亭古墨

最新推荐文章于 2022-06-28 17:13:51 发布

阅读量207

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/hefeng6500/article/details/113607772

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 200px;
  text-align: center;
  background: #eee;
}

.header {
  height: 48px;
  background: lightblue;
}

.footer {
  clear: both;
  height: 60px;
  background: lightgray;
}

.container {
  float: left;
  width: 100%;
  height: 200px;
}

.center {
  margin: 0 300px;
  height: 100%;
  background: lightgreen;
}

.left {
  float: left;
  margin-left: -100%;
  width: 300px;
  height: 100%;
  background: yellow;
}

.right {
  float: left;
  margin-left: -300px;
  width: 300px;
  height: 100%;
  background: pink;
}

<body>
  <div class="header">this is header</div>
  <div class="container">
    <div class="center">center</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="footer">this is footer</div>
</body>

center 元素父容器左浮动，宽度占满
center 内部的 center 设置 margin 边距，给左右留出空间
left 元素左浮动，并且 margin-left: -100%; 使得 left 排列到上一行并且顶格排列（正好占满 center 的 margin-left）
right 元素左浮动，margin-left：-300px;

兰亭古墨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三栏布局之双飞翼布局

效果图* { margin: 0; padding: 0;}html,body { width: 100%; height: 200px; text-align: center; background: #eee;}.header { height: 48px; background: lightblue;}.footer { clear: both; height: 60px; background: lightgray;}.con
复制链接

扫一扫