css 布局两行, 三行等高

关键在于添加

overflow: hidden;

padding-bottom:9999px;

margin-bottom:-9999px;

两行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name='keywords' content='' />
<meta name='description' content='' />
<title>两列等高</title>
<style type="text/css">
#wrap{width:500px;margin:0 auto; overflow:hidden;}
#SideBar{width:180px;float:left;border:1px solid #333; padding-bottom:9999px; margin-bottom:-9999px;}
#content{width:300px;float:right; border:1px solid #ccc; padding-bottom:9999px; margin-bottom:-9999px;}
</style>
</head>
<body>
<div id="wrap">
<div id="SideBar">导航<br />栏目名称<br />栏目名称<br />栏目名称<br /></div>
<div id="content">新闻<br />文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容字内容文</div>
</div>
</body>
</html>

简单:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<style type="text/css">
* {margin: 0; padding: 0;
}body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
}.main {overflow: hidden; width: 800px; margin: 0 auto;
}.left {float: left; width: 250px; overflow: hidden; background:#FB9D51;
}.center {float:left; margin-left:5px;width:295px; background:#FB9D51;
}.right {float: right; width: 245px; overflow: hidden;background:#FB9D51;
}.equal {padding-bottom: 32767px; margin-bottom: -32767px;
}
</style></head><body>
<div class="main"><div class="left equal"><p>测试一下</p><p>测试一下</p><p>测试一下</p></div><div class="center equal"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div><div class="equal right"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div>
</div>
</body>
</html>

完整：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<style type="text/css">
*{margin: 0; padding: 0;
}body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
}.main {overflow: hidden; width: 800px; margin: 0 auto;
}.left {float: left; width: 250px; overflow: hidden;
}.center {float:left;margin-left:5px; width:295px;
}.right {float: right; width: 245px; overflow: hidden;
}.bor_top { height:1px; background:#FB9D51; overflow:hidden;
}.equal {padding-bottom: 32767px; margin-bottom: -32767px;
}.box {background: #F5E2AF; border: 1px #FB9D51 solid; padding-left:10px; padding-right:10px;
}.mt5 {margin-top: 5px;
}</style>
</head>
<body>
<div class="main"><div class="left equal"><div class="box"> <p>你相信这个左右等高的布局是纯的CSS写的吗？</p> </div><div class="box mt5"> <p>来测试一下吧？~！</p> </div><div class="box mt5"> <p>测试一下</p> </div><div class="equal mt5 box"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div></div><div class="center equal"><div class="box"> <p>不由得你不信，这个的确是纯CSS写的</p> </div><div class="box mt5"> <p>来测试一下吧？~！</p> </div><div class="box mt5"> <p>测试一下</p> </div><div class="equal mt5 box"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div></div><div class="equal right"><div class="box"><p>测试一下</p><p>测试一下</p></div><div class="box mt5"><p>测试一下</p><p>测试一下</p><p>测试一下</p></div><div class="box mt5"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div><div class="equal mt5 box"><p>测试一下</p><p>测试一下</p><p>测试一下</p></div></div>
</div>
</body>
</html>

css 布局两行, 三行等高相关推荐

CSS布局的三个关键属性：float、position、display
最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...
CSS布局——多列等高布局
先看一个案例: 左边是导航部分,右边是详细内容,两者的高度都是不固定的.左边导航栏的内容可能比右边的内容高,反之亦然.但是两者的背景颜色高度始终保持一致! 下面进入正题: 1.利用border实现 & ...
CSS布局的三种方式
绝对定位绝对定位: 属性:position 值:absolute <style> p.abs{position: absolute;left: 150px;top: 50px; }& ...
前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制浮动浮动(float)的扩展清除浮动额外标签法(隔墙法) 父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮 ...
CSS布局系列一：标准、浮动、定位
标准 display block:表示元素占据全部可用宽度的元素,并且在其前后都会换行,常见标签有div.h.p inline:表示元素在一行中水平布置,可以使用水平内边距.边框和外边距.但是,垂直内 ...
css table设置边框_（代码示例）css实现等高布局的三种方式
本篇文章给大家带来的内容是关于css实现等高布局的三种方式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文讲的等高布局是在不手动设置元素高度的情况下,使用纯css实现 ...
两列布局、三列适应布局、两列等高适应布局。
一. 两列布局:左侧定宽.右侧自适应. 四种方法 :flex .position.float和负外边距.外边距 1. 使用flex. <!DOCTYPE html> <html> ...
【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...
css布局：多列等高布局
多列等高布局是在一个容器里面,并排的多列,如果内容的高度无法在一开始确定(例如内容是动态的),又需要让各列自然地撑开(不出现每列里面的滚动条),这时候需要用css或者js的方法把各列高度设置为最高列的 ...

css 布局两行, 三行等高

css 布局两行, 三行等高相关推荐

最新文章

热门文章

css 布局 两行, 三行等高

css 布局 两行, 三行等高相关推荐

最新文章

热门文章

css 布局两行, 三行等高

css 布局两行, 三行等高相关推荐