【前端攻城狮之路】CSS三列布局——两侧固定宽度、中间自适应

最新推荐文章于 2023-02-02 19:23:30 发布

Coder Ben

最新推荐文章于 2023-02-02 19:23:30 发布

阅读量517

点赞数

分类专栏： CSS 文章标签：前端 css 布局自适应三列布局

本文链接：https://blog.csdn.net/qq846294282/article/details/70758503

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

先附上效果图：

实现思路：

1、创建一个 div 容器（content）来存放这三个色块

2、设置容器 position:relative，两侧div position:absolute，使它们分别靠在 content 内部的左右两侧

3、中间 div 设置 width:auto，左右 margin 设置为两侧 div 的宽度（这样绝对定位的两个 div 就 ‘叠’ 在了中间 div 的左右 margin 上，原理同这篇博客点击打开链接）

具体代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>三列布局</title>
  <style type="text/css">
    *{ margin: 0; padding: 0; }
    div{ text-align: center; }

    div.header{ width: 100%; height: 15%; background-color: #ccc; }

    div.content{ width: 100%; height: 600px; position: relative; }
    div.content .div_l,.div_r{ width: 200px; height: 100%; position: absolute; top: 0; }
    div.content .div_l{ left: 0; background-color: red }
    div.content .div_r{ right: 0; background-color: blue; }
    div.content .div_c{ width: auto; height: 100%; margin: 0 200px; background-color: green; }

    div.footer{ width: 100%; height: 15%; background-color: #666; position: absolute; bottom: 0; }
  </style>
</head>

<body>
  <div class="header">header</div>

  <div class="content">
    <div class="div_l">div_left</div>
    <div class="div_c">div_center</div>
    <div class="div_r">div_right</div>
  </div>

  <div class="footer">footer</div>

<!--   <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.js"></script>
  <script type="text/javascript">

  </script> -->
</body>
</html>

Coder Ben

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端攻城狮之路】CSS三列布局——两侧固定宽度、中间自适应

先附上效果图：实现思路：1、创建一个 div 容器（content）来存放这三个色块2、设置容器 position:relative，两侧div position:absolute，使它们分别靠在 content 内部的左右两侧3、中间 div 设置 width:auto，左右 margin 设置为两侧 div 的宽度（这样绝对定位的两个 div 就 ‘叠’ 在了中
复制链接

扫一扫