您现在的位置是:首页 > Javascript
当前栏目
前端面试 【CSS】— CSS如何实现双飞翼布局?
2023-03-14 22:52:31 时间
双飞翼布局如下所示:
以下是代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
}
.container {
min-width: 600px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px;
height: 400px;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
</style>
</head>
<body>
<article class="container">
<div class="center">
<div class="inner">双飞翼布局</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</article>
</body>
</html>
相关文章
- 使用 Vue 实现一个简单的鼠标拖拽滚动效果插件
- 花5分钟看这篇之前,你才发现你不懂RESTful
- 用于 JavaScript 应用程序的五大嵌入式数据库
- 一篇文章带你了解SVG 图标
- 如何在 JavaScript 中等分数组
- 探索异步迭代器在 Node.js 中的使用
- 前端的自动化重构
- 通用爬虫技术要点: Dom树的重建
- 五个带有 JavaScript 原生 SDK 的云数据库
- JavaScript速记技巧:向着更清晰的代码迈进
- JavaScript 数组 reduce 总是不会用?看看这 5 个例子就懂了!
- 解决问题的能力比技术本身更重要
- 18 个 JavaScript 入门技巧!
- JavaScript 中 Eval 函数的前世今生,执行代码字符串
- SpringBoot健康检查,如何与容器配合?
- 从一个案例剖析交付工作中的四个段位
- 提高生产力,MyBatisPlus 讲解!
- 前端进阶:Css必知的几个底层知识和技巧
- 淘宝改版背后的逻辑
- 一篇文章带你了解SVG <Animation> 动画元素