两个DIV并列排在一个大的DIV中

原创 2012年05月29日 17:29:33

     今天突然碰到排版问题,对于我们这些不用那些网页制作软件的人来说,这个有时候还真的是个大难题。

     如题,终于解决了。

     css代码如下:

    
#page
{
	margin:0 25% 0 25%;
	padding: 10px 10px;
	border-style:dashed;
	height:500px;
}
#header
{
	margin: 0 atuo;
	height: 100px;
	border-style:dashed;
	text-align:center;
}
#search
{
	margin: 10px 0;
	border-style:dashed;
	height :50%;
	width:45%;
	float:left;
}
#search2
{
	margin: 10px 0;
	border-style:dashed;
	height :50%;
	width:45%;
	float:right;
}

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><!-- 使用命名空间 -->
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>新闻管理平台</title>
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div id=page>
		<div id=header>
			<h1>新闻管理平台</h1>
		</div>
		<div id=search>
			<p>你好</p>
		</div>
		<div id=search2>
			<p>你好</p>
		</div>
	</div>
</body>

效果图:




看到某大神的评论,给我这个菜鸟又指了条路,这个必须要清除浮动,如下

网址:http://zhidao.baidu.com/question/116485969.html

内容:===============================================================================================

clear是子模块之间限定的,

如下:

<div id="a">

 <div id="1"></div> 

 <div id="2"></div>

</div>

1和2之间,用clear来限定。而overflow:hidden是父模块对子模块来用的。就是a对于1和2模块的限定。clear非常好理解,主要是overflow:hidden不这么好理解,我发一篇文章给你看看,这个你看完就非常明白是什么意思了。(这是我看到的一篇文章,讲的最透彻的)overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下。<div id="wai"> <div id="nei"></div></div>这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验#wai{ width:500px; background:#000; height:500px;}#nei { float:left; width:600px; height:600px; background:red;}可以看到,我给nei这个id加了一个浮动,我们常规的理解是,我们允许nei这个id的div的右边出现其他的内容,只要它的宽度不超过wai这个div和nei这个div的剩余值。如果div wai中还包含其他的div,我不允许它出现在nei的右侧,我们则用样式clear:both指定这个div,不允许它浮动在nei右侧。这些在ie6里面是正确的。但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当nei这个div的宽度和高度都大于wai这个div的时候,wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中,都是500。这个时候我不理解了,我搜索了很多的资料,但是都没能理解这是为什么,直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出,给wai加上这个属性后,我们的nei的宽高自动的被隐藏掉了。另外,我们再做一个试验,将wai这个div的高度值删除后,我们发现,wai的高度自动的被nei这个div的高度值给撑开了。说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!也就是说,当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少,对于已经脱离了的wai来说,都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候,JJ的大小对于BB是没有撑开的作用的(有点少儿不宜的感觉-_-|||)OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了,就好比JJ又进入了BB内,JJ的大小自然又会影响到BB的大小。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!我相信,通过我的这些文字,大家对overflow:hidden这个属性有了全新的认识。希望大家和我一样,在div+css学习中能够不断的进步!


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

BootStrap让两个控件在一行显示

参加单位: 主要就是添加form-inline就可以了
  • ao123056
  • ao123056
  • 2016年04月06日 16:21
  • 11475

让两个Div并排显示

摘自:http://gaojianqi6.iteye.com/blog/1446651
  • li_qcxy
  • li_qcxy
  • 2014年05月13日 22:06
  • 8500

如何让两个div并排布局?

效果前: 效果后: 原因:div为块级元素,独占一行 过程:1、当单独对第一个div添加”float:left;”,会出现以下效果 分析:a、将div的宽高设置...

css中的并排显示(div/图片均适用)

ps:当类名不一样时候,就每个要并排显示的都要设置:float:left;/dispaly:block; 我们先设置3个div盒子对象,什么css样式都不设置看看效果。代码如下: 三个div盒子...

浅谈实现两个div并列的多种方法

方法一:float #div1{ width:50%; height:300px; background:blue; float:left; } #div2{ width:50%; hei...

css实现两个div并排等高

方法一 table-cell 代码 运行结果 方法二 css3盒模型 代码 运行结果方法一 table-cell代码 .left, ....

html 两个div并列显示

无标题文档 .div1 { float:left; width:175px; height:20px; } .div2 { width:175px; height:20px; float:le...

div中内嵌并排div的显示问题

在页面布局中,最常使用的就是div标签,经常会出现div中内嵌div的情形,这时,子div的排列就相当重要。下面推荐两种方式。 **1. 当需要两个div并排显示,并拥有同一个父div时:** ...
  • shy2shy
  • shy2shy
  • 2016年12月28日 20:16
  • 643

多个DIV,并排居中

1.CSS .main{display:-webkit-box;display:-moz-box;width:100%;} .left{width:120px;background-color:...

CSS:多个DIV在同一行居中显示的一种实现方法

在项目开发中,画面经常有多个DIV的内容显示在一行的要求。 比如HTML 你好,这是div1的第一行。 你好,这是div1的第二行 你好,这...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:两个DIV并列排在一个大的DIV中
举报原因:
原因补充:

(最多只允许输入30个字)