div 固定宽度横向布局

在这里,先想说一下div布局和table布局孰优孰劣的问题,个人觉得其实不是说div布局就一定要好于table。个人感觉最外层的布局用table蛮不错的,就是代码过多,眼晕,没别的坏处。

 

言归正传,假设想用布局一个固定宽的的网站,应该怎样去做?div是“块”元素,每个div默认都会占据一行的,如果要用div进行布局的话,我们首先要做的就是使div可以横向排列。这通过设置floatleft实现的。

 

我们可以简单的来试验一下:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

 

<body >

         <div style="width:200px;float:left;border:1px solid red" >

                            第一个

         </div>

         <div style="width:200px;float:left;border:1px solid red" >

                            第二个

         </div>

</body>

</html>

看,两个div紧挨着排列起来了。

 

接下来呢?还有啥要做的呢?我们需要div能够自动扩展才行,更多的情况下,为了布局美观,我们还需要给div指定一个最小的高度。因为在浏览器中,指定了高度div是不随着里面内容的增加扩展的,我们需要设置上min-height这样的属性,这时为了在ie6下也能够使用,我们还需要增加一个ie专用高度:_height

这样,就可以完美的进行竖向自动扩展了。

请注意,这里的说的是自动扩展,而不是自动充满,关于让div自动充满整个页面的方法,请参见我的其他文章。

 

还有啥要做的呢,由于对内部div指定了float,此时的外部div就不能够自动扩展了,我们需要在后面增加一个div,设置clear属性为both,以便于清除浮动。这时,一切OK了!

 

最后,我们还要使页面居中展示,一般对于固定宽的的页面都会这样设置,对称嘛。

我们需要在body上增加text-align:center样式以及在最外部的div上增加margin-left: auto;margin-right: auto;width:604px;即可。

 

全部代码如下。很简单吧。

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

 

<body style="text-align:center" >

 

<div style="border:#000000 solid 1px;margin-left: auto;margin-right: auto;width:604px;">

 

    <div  style="width:300px;min-height:100px;border:#00ffff solid 1px;float:left">第一个<br/>第一个<br/>第一个<br/第一个<br/>第一个<br/>第一个<br/>第一个<br/>第一个<br/>第一个<br/></div>

        

        

    <div style="width:300px;min-height:100px;border:#00ffff solid 1px;float:left">第二个<br/>第二个<br/>第二个<br/></div>

        

        

    <div style="clear:both"></div>

</div>

 

 

</body>

</html>

 

当然,这个例子还是比较简陋的,可以参照我的网站 www.txstory.com 的首页面来看一下用div布局的实际效果,非美工出品,比较简陋,请多包涵

你可能感兴趣的:(html,css,浏览器,IE)