一个大的DIV中嵌套两个小的DIV一左一右

html-css015

一个大的DIV中嵌套两个小的DIV一左一右,第1张

大的DIV中嵌套两个小的DIV一左一右步骤如下:

1,首先,图中显示的Web结构是html和css。

2,打开html页面,如图所示,定义一个大div和两个小div。

3,最常用的float float,只要两个小div的宽度小于或等于大div的宽度,就可以并排实现。

4,使用position进行绝对定位,然后使用margin-left删除第一个小div的宽度。

5,使用表格框并排实现div,这是相同的宽度。

6,如图所示,这是上面三种方法运行后的结果,可以看到两个大DIV嵌套在一个大DIV中。

一句话:有些块元素不可以包含另一些块元素 ,DTD中规定了块级元素是不能放在P里

P标签内包含块元素时,它会先结束自己,比如:<*p><*div>测试p包含div<*/div><*/p>

那么浏览器会解释成:

<*p><*/p><*div>测试p包含div<*/div><*p><*/p> 会多解释出一个p

起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异。于是究其原因,发现块级元素P内是不能嵌套DIV的。

深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种。

in-line这个词有很多种解释:内嵌、内联、行内、线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法--内联。