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之左定宽度右自适应宽度并且等高布局

css

CSS:等高布局

方法一:使用数值非常大正padding-bottom与负margin-bottom *{ margin:0; padding:0; } #container{ overflow...

CSS等高布局的6种方式

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

使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到f...

CSS等高布局

CSS等高布局原理:通过padding补白(即:隐藏容器溢出,正内补丁,负外补丁)实现。事实上这种方式实现的等高布局只是个障眼法,即通过背景颜色的填充,产生视觉上等高的假象而已。...
  • WG2030
  • WG2030
  • 2015年07月21日 11:42
  • 290

使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到f...

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

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

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧: 左侧固定宽,右...

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

CSS3引入了Flexbox盒模型

等高布局

  • 2016年03月17日 13:03
  • 12KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css布局:等高布局
举报原因:
原因补充:

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