文档章节

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
程序员
私信 提问
左右两栏等高实现方法

等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白,有时需要让右边的高度和左边的保持一致。实现的方法有很多,以前一般是用背...

ys-l
2010/01/01
238
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
圣杯布局(holy grail)总结

什么是圣杯布局? 根据 wikipedia词条,圣杯指多列等高的网页布局。因为目前的实现方法都存在局限,而又很难找到一个最优解,圣杯因此而得名。 holy-grail.png 在Matthew Levine 的文章 中提...

一拾五
01/14
0
0
JavaWeb02-HTML篇笔记(一)

1.1 案例二:使用DIV+CSS布局注册页面:1.1.1 需求: 使用DIV+CSS的方式完成注册页面的布局: 1.1.2 分析:1.1.2.1 技术分析: 【CSS中的盒子模型】 Ø 内边距:padding. Ø 边框:border Ø 外...

我是小谷粒
04/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

oh-my-zsh 自定义

GitHub 地址 基于 oh-my-zsh 的自定义配置,增加了一些个人常用插件与皮肤。 采用的是 git submodule 来维护,包括 oh-my-zsh,之所以这么搞,主要是手头有多台 linux 需要维护, 每台机器、...

郁也风
今天
4
0
Docker安装踩坑:E_FAIL 0x80004005的解决

参考 菜鸟教程--Windows Docker 安装 http://www.runoob.com/docker/windows-docker-install.html 官方文档-Install Docker Toolbox on Windows https://docs.docker.com/toolbox/toolbox_in......

karma123
今天
5
0
js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
17
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
27
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
33
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部