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

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

如题，终于解决了。

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>

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学习中能够不断的进步！

两个DIV并列排在一个大的DIV中相关推荐

AutoML自定义搜索网络类(如何在一个大的网络中搜索一个网络)
class ChoiceNet():def __init__(self):# 这里可以最小可以选择三个,第一个必须输入,最后一个必须输出,中间任意个修改self.vgg_base_dict = [{' ...
HTML如何让两个div并排在一行,如何实现两个或多个div并列于一行
div是块状元素,默认是独占据一行. 但是,如何让两个或多个块区域并列于一行? 块状元素有一个很重要的"float"属性,可以达成这种效果.float 属性也被称为浮动属性,这个词 ...
两个div并列一行显示的多种方法
以下提供了5种实现两个div并列一行显示的方法,其中最常用的为浮动,还有定位等方法可以实现. 方法一:float浮动,float:left;为左浮动,也可以设置为float:right;右浮动,也可以 ...
两周从爬虫小白变大神，看完你就知道我不是标题党了【五万字教程，建议收藏】
大家好,我是辣条,今天给大家带来最硬核的爬虫教程. 目录 Python爬虫第一天什么是爬虫爬虫与Web后端服务之间的关系 Python爬虫技术的相关库常见反爬虫的策略爬虫库urllib[重要] ...
css使两个盒子并列_前端学习CSS
一 CSS CSS是Cascading Style Sheets的缩写,层叠样式表,用来控制网页数据的显示,可以使网页的显示与数据内容分离. 二引入方式 (1)行内式:在标记的style属性中设置C ...
三个并排居中html,css如何让三个DIV并列在一行中
--好评和差评--&gt:center;100&lt:73px;} html文件.news_con_oth{height:right; width:hidden:470px; < ...
如何在更大的div内使图像中心（垂直和水平）居中[重复]
这个问题已经在这里有了答案 : div块内的CSS中心文本(水平和垂直) (23个答案) Flexbox:水平和垂直居中 (10个答案) 如何在div内垂直对齐图像 (35个答案) 如何在div中垂直 ...
李开复：走向全球的两大路径，中美何以各占其一
李开复:走向全球的两大路径,中美何以各占其一在1月15日在台湾举办的2015创新创业高峰论坛上,创新工场董事长李开复发表了主题为<数位革命:创新创业的黄金时代>的演讲.以下为李开复 ...
WEB前端面试题分别使用2个、3个、5个DIV画出一个大的红十字
[html] view plain copy <!DOCTYPE html>  <html> <body> <div st ...

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

两个DIV并列排在一个大的DIV中相关推荐

最新文章

热门文章