css布局:等高布局

原创 2016年08月29日 17:01:57

等高布局:(左右两边,一侧设置高度,另一侧自适应)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等高布局</title>
    <style>
        *{ margin:0;padding: 0;}
        .wrap{ width:1000px; margin: 0 auto;overflow: hidden;}
        .left{ width:200px;background: yellow;float: left;padding-bottom: 10000px;margin-bottom: -10000px;}
        .right{ width:800px;background: yellowgreen;float: right;padding-bottom: 10000px;margin-bottom: -10000px;}
    </style>

</head>
<body>

<div class="wrap">
    <div class="left">

        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>

    </div>
    <div class="right">

        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>
        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>
        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>
        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>


    </div>
</div>

</body>
</html>

效果如图所示

版权声明:谁没个菜的时候!

CSS等高布局的6种方式

前面的话   等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及t...
  • cometwo
  • cometwo
  • 2016年05月04日 22:24
  • 8239

css负边距可以实现的布局(上)左固定右自适应,多行多列,等高布局

css负边距原来有这么大的妙用。 今天看了一篇大大的博文: css的负边距(margin负值)的绝招负边距可以做的事有很多。 可以增大元素的宽度 可以实现多列多行布局 左侧固定右侧自适应布局 等高...
  • u014787301
  • u014787301
  • 2016年08月02日 13:18
  • 933

圣杯布局------4种css左中右布局方式

1. float+margin html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style ...
  • u012657197
  • u012657197
  • 2017年06月26日 16:42
  • 435

两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

代码: 效果图: 路人甲:OK?等高了?? 路人丙:不是吧? 路人乙:你这是在逗我? xiaomogg: 效果有点惨,不过这的确是已经做了登高处理的 为什么“登高”,看起来却不等高 请留意代...
  • u014071104
  • u014071104
  • 2015年08月02日 08:57
  • 2031

两栏等高布局||两栏自适应高度

常用两栏等高布局三种方法 这里梳理一下三种常用的两栏等高布局方法,如有谬误,欢迎指正 -、margin-bottom和padding-bottom html hello hello h...
  • qq_35639964
  • qq_35639964
  • 2017年02月24日 14:43
  • 1089

【CSS3】-伸缩布局盒模型实现 3列等高布局

CSS3引入了Flexbox盒模型
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016年04月28日 16:32
  • 3320

css3盒布局取代float布局

下面来写一个布局,上面分三列,底部还有两个一列。 1. 用float浮动来写 注意,上面三个div都固定了宽度且向左浮动,红色div使用clear:both属性 问题来了:就是上面三个浮动的div,高...
  • xuanwuziyou
  • xuanwuziyou
  • 2015年08月30日 18:40
  • 1621

轻松实现两栏布局:左右DIV等高、内容自适应屏幕高度

test body{ background:#ccc; overflow-y:scroll; } #wr...
  • malinjie66
  • malinjie66
  • 2013年07月12日 00:33
  • 1459

css 解决方案-等高布局

等高布局 *{ margin:0; padding:0; } body{ font-family:"Lucida Console", Mona...
  • studyrzy
  • studyrzy
  • 2013年03月16日 16:38
  • 657

CSS:等高布局

方法一:使用数值非常大正padding-bottom与负margin-bottom *{ margin:0; padding:0; } #container{ overflow...
  • crystal6918
  • crystal6918
  • 2017年02月16日 10:50
  • 207
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css布局:等高布局
举报原因:
原因补充:

(最多只允许输入30个字)