您的位置：首页 > Web前端 > CSS

CSS一行两列左右背景高度自适应

2010-01-16 07:02 344 查看
博客开通一个多星期了一直写的都是一些杂七杂八的评论，一直没有写程序开发方面的内容。主要一个原因是后台文本编辑器一直没有弄好，帖代友太麻烦。目前已经Ok了，以后的日子里我也会多写一些技术类文章。一般都是我工作中实际碰到的情况，贴出来一是便于以后自己查阅，二个也可以和大家交流，共同学习

一行两列左右背景高度自适应一直是css布局中的难点，虽然这在表格中很好实现，或者用JS+div也能实现。下面我的写法是纯css写的，在目前所有已知浏览器下测试通过。废话不多说，代码贴出来

XML/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>haozi一行两列背景高度自适应</title>

<style>

*{margin:0; padding:0}

.wrapper{width:600px;/*总宽度为900，这里只能写600，因为padding-left有300像素*/ padding-left:300px; background:#F00; float:left; display:inline}

.content{float:left; display:inline; background:#00F}

.left{float:left;display:inline; margin-left:-300px; position:static; _position:fixed;/*ie6和以下版本要用fixed*/ width:300px}

.right{float:right; width:600px}

.clear{clear:both}

</style>

</head>

<body>

<div class="wrapper">

<div class="content">

<div class="left">left<p>left</div>

<div class="right">right<p>right<p>right<p>right<p>right<p>right<p></div>

<div class="clear"></div><!--任何时候浮动后都应立即清浮动，养成好习惯-->

</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>haozi一行两列背景高度自适应</title>
<style>
*{margin:0; padding:0}
.wrapper{width:600px;/*总宽度为900，这里只能写600，因为padding-left有300像素*/ padding-left:300px; background:#F00; float:left; display:inline}
.co

nt
ent{float:left; display:inline; background:#00F}
.left{float:left;display:inline; margin-left:-300px; position:static; _position:fixed;/*ie6和以下版本要用fixed*/ width:300px}
.right{float:right; width:600px}
.clear{clear:both}
</style>
</head>

<body>
<div class="wrapper">
<div class="content">
<div class="left">left<p>left</div>
<div class="right">right<p>right<p>right<p>right<p>right<p>right<p></div>
<div class="clear"></div><!--任何时候浮动后都应立即清浮动，养成好习惯-->
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航