CSS如何实现双飞翼布局？

艾光远

已于 2025-03-17 21:52:54 修改

阅读量461

点赞数

CC 4.0 BY-SA版权

分类专栏： Interview 文章标签：前端开发 CSS 面试

于 2021-11-13 22:02:23 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/121310976

Interview 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了CSS如何实现双飞翼布局，通过代码示例展示了这种布局方式的实现过程，适合前端开发者和面试备考者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

双飞翼布局如下所示：

以下是代码实现：

<!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

了解本专栏