两列或三列自适应布局

最新推荐文章于 2020-11-27 22:33:30 发布

初漾

最新推荐文章于 2020-11-27 22:33:30 发布

阅读量460

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/shuidinaozhongyan/article/details/72533332

版权

CSS3 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

一、三列布局

左中右三栏布局，左右两栏宽度固定（要想不固定将宽度值改为百分值即可），中间栏宽度自适应。左右两栏的宽度为200像素。

第一种：双飞翼布局（内部添加了一个盒子：innner，少了定位）

思路：盒子顺序：中间（宽度：100%），左边（宽度：200），右边（宽度：250）

CSS样式：设置float:left。

左盒子：margin-left: 负100%,右盒子：margin-left: 负自身盒子宽度

中间盒子中的内容：内容外面包裹一个盒子，该盒子的margin:0 右边盒子宽度 0 左边盒子宽度

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            min-width: 700px;
        }
        .container {
            height: 300px;
        }
        .column {
            height: 300px;
            float: left;
        }
        .medium{
            width: 100%;
            background-color: pink;
            word-break: break-all;
        }
        .left{
            width: 200px;
            background-color: yellow;
            margin-left: -100%;
        }
        .right{
            width: 250px;
            background-color: purple;
            margin-left: -250px;
        }
        .inner{
            margin:0 250px 0 200px;
        }
        .logo{
            width: 145px;
            height: 58px;
        }
        .logo a{
            display: block;
            width: 100%;
            height: 100%;
            background: url("logo.jpg") no-repeat;
            text-indent: -2000em;
        }
    </style>
</head>
<body>
   <div class="container">
       <div class="column medium">
           <div class="inner">
               my name is andy.my name is andy. my name is andy.my name is andy. my name is andy.my name is andy.
               my name is andy.my name is andy. my name is andy.my name is andy. my name is andy.my name is andy. my name is andy.my name is andy.
           </div>
       </div>
       <div class="column left">
           <div class="logo">
               <h1>
                   <a href="www.itcast.com" title="传智播客">前端开发学院</a>
               </h1>
           </div>
       </div>
       <div class="column right"></div>
   </div>
</body>
</html>

第二种：圣杯布局：

思路：盒子顺序：中间（宽度：100%），左边（宽度：200），右边（宽度：250）

CSS样式：设置float:left。

左盒子：margin-left: 负100%,右盒子：margin-left: 负自身盒子宽度

与双飞翼不同：最外层父盒子设置左右padding，然后左右盒子分别相对于自身移动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      min-width: 700px;
    }
    .container {
      height: 300px;
      padding: 0 250px 0 200px;
    }
    .column {
      height: 300px;
      float: left;
    }
    .medium{
      width: 100%;
      background-color: pink;
      word-break: break-all;
    }
    .left{
      width: 200px;
      background-color: yellow;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right{
      width: 250px;
      background-color: purple;
      margin-left: -250px;
      position: relative;
      right: -250px;
    }
    .logo{
      width: 145px;
      height: 58px;
    }
    .logo a{
      display: block;
      width: 100%;
      height: 100%;
      background: url("logo.jpg") no-repeat;
      text-indent: -2000em;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="column medium">
      my name is andy.my name is andy. my name is andy.my name is andy. my name is andy.my name is andy.
      my name is andy.my name is andy. my name is andy.my name is andy. my name is andy.my name is andy. my name is andy.my name is andy.
  </div>
  <div class="column left">
    <div class="logo">
      <h1>
        <a href="www.itcast.com" title="传智播客">前端开发学院</a>
      </h1>
    </div>
  </div>
  <div class="column right"></div>
</div>
</body>
</html>

初漾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两列或三列自适应布局

一、三列布局左中右三栏布局，左右两栏宽度固定（要想不固定将宽度值改为百分值即可），中间栏宽度自适应。左右两栏的宽度为200像素。第一种：双飞翼布局（内部添加了一个盒子：innner，少了定位）思路：盒子顺序：中间（宽度：100%），左边（宽度：200），右边（宽度：250）CSS样式：设置float:left。左盒子：margin-left: 负100%,右盒子：margin-
复制链接

扫一扫