`
nianshi
  • 浏览: 406857 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

纯CSS实现两列等高

CSSXHTMLHTMLBlog 
阅读更多 
<!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" />

<style>
html,body,tbody{margin:0;padding:0;}
#Body{overflow:hidden;padding:0;padding-left:180px;}

#Left,#Right{height:auto;margin-bottom:-32767px;padding-bottom:32767px;}
#Left{display:inline;float:left;width:180px;margin-left:-180px;background:#CCC;}
#Right{float:right;width:100%;background:#999;}

</style>
</head>

<body>
<div id="Body">
<div id="Left">asdfasdfasdfasdf<br><br></div>
<div id="Right"><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
</body>
</html>

 

另外五种实现等高方法：http://www.hemin.cn/blog/?p=761

 

 

分享到：
| 互联网产品的九个精神
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS多种方法实现div两列等高

    CSS多种方法实现div两列等高布局 ， 前端工程师必备知识，div两列等高

    CSS那些事儿.pdf

    尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。 随书所附光盘包含多媒体教学及实例源文件。 无论是CSS布局的初学者还是具有一定水准...

    CSS那些事儿（源码）

    尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。 随书所附光盘包含多媒体教学及实例源文件。 无论是CSS布局的初学者还是具有一定水准...

    css-adv:htmlcss 布局实现技巧练习

    两列等高？）简单的tab切换，要压住下边线哦左小图，右自适应宽度的布局，小三角箭头的应用箭头以及垂直排列tag标签，注意文字垂直居中，标签要水平对齐表格布局小应用，如何变得更精美复杂的下单列表筛选排序功能...

    CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

    左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局，那么也是不难。我个人认为这个考题关键之处就在考这里，考你如何实现等高布局；所以这一点你需要整明白如何实现

    《css那些事儿》实例源码.rar

    《css那些事儿》——全书以传达CSS布局思维为中心，通过页面中的文字、图片、表格、...尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。

    多列等高的CSS实现代码

    什么是等高布局? 先来看一个案例：   上图中的页面的主体内容是两列结构，左列是用来导航的，右列是用来显示内容的。我们看到它们有一个共同的边框，中间还有一条分隔线，左右两列的高度都是不固定的。这种情况下就...

    左定宽度右自适应宽度并且等高布局实现代码

    （当内容超出200时，会自动以等高的方式增高） 要求不用JS或CSS行为实现； 仔细分析试题要求，要达到效果其实也并不是太难，只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事： 左边固定，...

Magicbox
Global site tag (gtag.js) - Google Analytics