热搜：编程 Python Microsoft 编程语言 C++

DIV+CSS 浮动布局完美如何解决方案

发布时间：2023-03-11 12:50:07 来源：网络

.

聪明的人懂得说，智慧的人懂得听，高明的人懂得问。若要前行，就得离开你现在停留的地方。早安！

浏器自身的问题往往是这些麻烦的罪魁祸首。Firefox对标准的支持较好些，IE7、IE8次之，IE6目前用户群较多，但也比较糟糕，经常莫名其妙地多出一些空隙等等。拿浮动布局来说，你算好的宽度在Firefox以及 IE7、IE8下可能是正常的，拿到IE6里就会发现不该换行的时候它却换行了。
然而，不管HTML页面设计人员怎么骂微软，网页还是要做的。我这里就以自己的经验给大家介绍一些常用的解决方案。
1、如果是两栏并列，要在中间显示分界线或图片，可以使用repeat-y的背景图片来实现，此样式写在这两栏的父级元素中，可以保证分界线与最高的栏等高。
示例：

复制代码

代码如下:

假设vline.gif是宽100px高1px，左边99像素为白色，最右边1像素是黑色，则此背景图片实现的效果就是在两列间拉出一条黑色竖线。
不过要说明一下，这种方法如果父元素宽度设计200px，理论上是正确的，但实际上在IE6里会换行，因为IE6不遵从W3C标准。在IE6里你可以把父元素宽度设得比200px大一些，但这样格式会不够完美。你可以用下面的margin法解决这个换行问题。
2、如果有一列想用自适应宽度，而不是固定宽度，可以巧用margin属性。比如左边固定100px，右边自适应，则可以让父元素“margin- left:100px”，第一列再“margin-left:-100px”，第二列就可以用“width:100%”来实现自适应宽度了。如果不这样巧用margin，第二列没法设百分比，因为浏览器客户区宽度*100%+100px是超出浏览器客户区总宽度的，浏览器会出现横向滚动条；又因为浏览器客户区总宽度不确定（确定的话就不用什么自适应了），你也没法用类似80%这样的百分比使其正好撇下100px给第一列。
另外你可能想让这两列的父级有一个最小宽度以避免两列换行，这个可以用min-width属性来实现。
示例代码：

复制代码

代码如下:

3、自适应高度的该如何设计呢？很多人为这个问题头痛过，抱怨height:100%不管用。其实，让它管用很简单，只是别忘了给html也加上 height:100%的属性。没错，就是html，你可以写成这样：html,body{height:100%}。但这样还有个问题，没解决。如果你想让一行字始中处于最下面，该怎么做呢？答案还是margin。
你可以把主体部分放在一个DIV中，将其最小高度设为100%，然后在后面放页脚的DIV，假如它的高度为40px，则“margin- top:-40px”，这样可能会使主体部分下边的内容被遮住，解决办法是在主体部分最下面的元素上加“padding-bottom:40px”属性即可。理论上讲加“margin-bottom:40px”也可以，但观查发现在IE里会出现垂直滚动条。
示例代码：

复制代码

代码如下:

<div id=”main” style=”height:auto;min-height:100%;”>
<div>峰之部落 DIV+CSS浮动布局完美解决方案</div>
<div style=”padding-bottom:40px;”>something from https://www.haodaima.com/</div>
</div>
<div id=”footer” style=”margin-top:-40px;”>页脚始终在底部</div>

注意别忘了样式表中要加：html,body{height:100%;} 峰之部落原创文章，转载请注明出处。
这三招应用技巧，基本能解决DIV+CSS浮动布局的常见问题，且能较好的兼容不同的浏览器。

本文 DIV+CSS 浮动布局完美如何解决方案到此结束。其实根本就没有什么“假如”，每个人的人生都不可重新设计。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:

标签： DIV CSS