文档章节

div+css实现的左右两个等高div

Delete90
 Delete90
发布于 2017/09/08 17:33
字数 256
阅读 4
收藏 0
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div+css实现的左右两个等高div</title>
<style>
*{
    margin: 0;
    paddig: 0;
}
.wrap{
    width: 700px;
    overflow:hidden;
    margin: 0 auto;
}

.left,
.right{
    margin-bottom: -100000px;/*数值随便设置,越大越好,也就是(-padding-bottom值)*/
    padding-bottom: 100000px;/*数值随便设置,越大越好*/
}

.left{
    width: 300px;
    float: left;
    background: yellow;
}

.right{
    width: 400px;
    float: right;
    background: green;
}
</style>
</head>

<body>
<div class="wrap">
    <div class="left">
        left</p><p>left3333</p><p>left333</p><p>lef33333t</p><p>left</p><p>left</p><p>left</p><p>end</p>
    </div>
    <div class="right">
    <p>left</p><p>right</p><p>left</p><p>left</p><p>right</p><p>left</p><p>left</p><p>left</p><p>left</p>    
        <p>left</p><p>right</p><p>left</p><p>left</p><p>right</p><p>left</p><p>left</p><p>left</p><p>left</p>
        <p>left</p><p>right</p><p>left</p><p>left</p><p>right</p><p>left</p><p>left</p><p>left</p><p>left</p>    
        <p>left</p><p>right</p><p>left</p><p>left</p><p>left</p><p>right</p><p>left</p><p>left</p><p>left</p>
        <p>left</p><p>
        <p>right</p><p>right</p><p>right</p>
        <p>end</p>
        </div>
</div>

</body>
</html>

© 著作权归作者所有

共有 人打赏支持
Delete90
粉丝 2
博文 46
码字总数 32068
作品 0
程序员
一小时搞定DIV+CSS布局-固定页面开度布局

本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局。 转载请标明:http://www.kwstu.com/ArticleView/divcss2013929173533658 关于DIV+CSS布局中用到的CSS...

小和尚敲代码
2016/03/03
49
0
Div+Css布局教程(-)CSS必备知识

目录: 1、Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解。 一、CSS布局属性 Width:设置对象的宽度(width:45px)。 Height:设置对象的高度(Height:45px;)。 Back...

城固如春
2016/11/12
3
0
html5如何解决frameset的替代方案

因为要做pad版的web应用,所以需要杜绝使用frame来实现页面框架,根据html5的描述可以用div+css实现,可问题是局部刷新怎么解决呢(刷新某一个frame)? 如果div+css的话,页面每触发一个事件需...

soeight
2012/07/14
17.7K
5
CSS技巧!像table一样布局div

下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器...

晨曦之光
2012/03/09
0
0
分享29本关于div+css的学习书籍(免费下载)

分享29本关于div+css的学习书籍(免费下载) 1、多浏览器兼容分析 2、浏览器兼容 3、CSS参考手册3.4 4、网页设计师 5、网页制作完全手册 6、十天学会DIV+CSS(WEB标准) 7、WEB设计版精华荟萃 ...

邓剑彬
2012/11/30
2.3K
2

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 小心着凉 @红薯

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:5.33起,其声呜呜然,如怨如慕,如泣如诉。余音袅袅,不绝如缕。分享Arch Enemy的单曲《Bridge Of Destiny (2009)》 《Bridge Of...

小小编辑
今天
250
4
what f,,

anlve
今天
9
0
初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
15
0
现场看路演了!

HiBlock
昨天
23
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部