让div左右对齐自适应高度的网页特效(常看)

原文:http://www.360doc.com/content/13/0723/09/8445249_301885130.shtml

<!DOCTYPE HTML >
<html>

	<head>
		<meta charset="utf-8">

		<style type="text/css">
			.box { border:1px solid #006699; width:500px; overflow: hidden; }
			.box .left { float:left; width:30%; background:red; padding-bottom:3000px; margin-bottom:-3000px; }
			.box .right { float:right; width:70%; background:green; padding-bottom:3000px; margin-bottom:-3000px; }
		</style>
	</head>

	<body>

		<div class="box">
			<div class="left">
				 <h1>wo</h1> <h1>wo</h1> <h1>wo</h1>
			</div>
			<div class="right">
				 <h1>wo</h1>
			</div>
		</div>
	</body>

</html>
时间: 2024-09-19 23:53:47

让div左右对齐自适应高度的网页特效(常看)的相关文章

脚本控制三行三列自适应高度DIV布局

脚本|控制|自适应 这个例子是用JS脚本控制并列DIV的高度,通常在DIV布局中,自适应高度一直是比较头疼的问题,一般大都采用背景图.外套DIV.右栏覆盖左栏......来解决.现在加了脚本后,简单多了,假如有三个水平并列的DIV,fbox.mbox.sbox,只要在<body>标签中写入:,测试条件:ie5.x.ie6.0.FF1.03. NS7.2.opera8.01.最终效果. JS代码:版权归原作者,仅供学习研究. /* --------------------------------

推荐:网页中三列自适应高度布局的实现

网页|自适应 三列的布局,一个固定宽度的左列是导航列,右列可以放Google Ads 或者 Flickr的像册,自适应宽度的中间列是主要内容. 特点: 有一个自适应宽度的中间列与固定的宽度左右列. 中间列的主要内容首先出现在网页中. 可以允许任一个列的内容为最高. 非常简单的CSS和最少的Hacks. Step 1: 搭建结构 先从header, footer, and container开始. <div id="header"></div> <div i

div+css自适应高度

  <html> <head> <style type="text/css"> body {  background:#999;  text-align:center;  color:#333;  font-family:Arial, Verdana, Sans-serif; } #header {  width:776px;  margin-left:auto;  margin-right:auto;  padding:0px;  backgrou

基于jQuery实现左右div自适应高度完全相同的代码_jquery

在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm完整代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

关于div自适应高度/左右高度自适应一致的js代码_javascript技巧

在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题. 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致. 左右自适应高度一致 Jquery 复制代码 代码如下: <div style="width:300px;"> <div id="Left" style="float:left;background-color:blue;">1<br/>3<br/&g

让网页框架自适应高度(根据内容自动适应)

网页|自动|自适应|框架 通过以下的代码就可以轻松实现框架自适应高度. 以下是引用片段:<script type="text/javascript">     //** iframe自动适应页面 **//         //输入你希望根据页面高度自动调整高度的iframe的名称的列表     //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号.      

Div即父容器不根据内容自适应高度的解决方法

解决|自适应 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"><div id="content"></div></div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,清除浮动的容

相邻div实现一个跟着另一个自适应高度示例代码

本文为大家详细介绍下如何实现,相邻div.一个跟着另一个自适应高度,具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助     复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>new document</title> <style type="text/css&q

网页设计技巧:iframe自适应高度

可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧.所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe.如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了.而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了. 顺便说下,iframe在迫不得已的时候才去用,它会给前端开发带来太多的麻烦. 传