CSS 宽度自适应总结

最新推荐文章于 2024-04-07 21:10:40 发布

寂若an年

最新推荐文章于 2024-04-07 21:10:40 发布

阅读量2.4k

点赞数

分类专栏： CSS HTML

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

前些日谈到布局，学长说，你给我写个“一边固定宽度一边自适应”。我当时有点蒙圈，回去查了些资料现在总结了一下。

1.问题：什么叫做自适应？
有两种情形，其实这两种还蛮不同的。放在一起来总结吧。
情形一：宽度自适应，一列定宽，一列自适应，随窗口大小改变而无滚动条出现。

情形二：高度自适应，创建高度相等的列。

-------------这篇文先说【第一种情况】吧~ 就考虑左侧定宽200px，右侧自适应咯~----------------------

2. 思路？
定宽的列，自然会想到要设置宽度，暂且设置为200px。
自适应的列，其宽度需为100%。
高度均为200px,设置背景颜色用来区别两个Div。
贴上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Try</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#left{
width: 200px;
height:200px;
background-color: red;
}
#right{
width: 100%;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id = "wrapper">
<div id = "left">Left</div>
<div id = "right">Right</div>
</div>
</body>
</html>

会是什么情形呢？

不难理解。因为div是块元素，所以左div占据一行，宽度为200px。右侧div占据一行，宽度为100%（相对父元素wrapper）。

3. OK，现在【最重要的是】，考虑如何让两者同在一行！！！
有2种方式：absolute方式和float方式。

4. absolute方式

左div设置position：absolute;使其脱离文档流，相对父div的最左绝对定位。它像不存在了一样，于是右div就‘上’来了。

#wrapper{

position：relative;

_height:1%;/*IE6hack*/

}

#left{

position:absoult;

left:0;

}

(IE 6在相对定位时有Bug，要给wrapper加个hack。这里就不赘述了。)
看看效果吧~

      看到了神马？！！
         对！右div是上来了，可左div无情的把右div的文字挡住了。
      这时候，我们只需要给父div加个padding-left，让右div往右串“左div的宽度”即可。

#wrapper{

Padding-left:200px;

}

看看效果咯。
Chrome中

IE6也如此哦~嘻嘻

      OK，absolute方式完毕，下面介绍float方式。

5.  float方式：

      这里稍稍调整一下HTML的代码。因为涉及到负margin的问题。
   （大家思考一下为什么要调整顺序，我也是想了好久才想明白的，但是说不太明白~可以调一下顺序再写写CSS，你会更理解的~）
贴上HTML代码：

<div id = "right">
<div>Right</div>
</div>
<div id = "left">Left</div>

复制代码

CSS的宽高和上面的例子一样，看看效果。


      因为块元素的问题，所以不难理解，两者各占据一行。HTML代码中右div在上，故蓝色的在上，红色在下。
      同样的，如何让2者在一行呢？！
      答案是，浮动呗！

#left{

float:left;

}

#right{

float:right;

}

你认为这就会在一行么？
   看看效果


         发现二者还是各占一行。为什么呢？因为右div的宽是100%，就算浮动了，该行也没有左div的位置啊，于是，牛X的负margin就出现了！

#right{

margin:0 0 0 -200px;

}

这句相当于右div的左边留了个200px宽的空儿，说：这地儿让给你们了。于是左div就浮了上来。


         又怎么了？
   可是发现左div又给右div挡住了。可以看到HTML中【别具匠心的】在右div里嵌套了一个div，控制它的位置就可以了。

#right div {

margin-left:200px;

}

看看效果：

      IE6也如此哦~大功告成！

6.  总结一下吧。
   其实最主要的是，如何让两个Div同处一行，而这两个div有一个的宽度还是特殊的100%。
   浏览器缩放的时候还不能有任何奇怪的事发生哦，这个只有试试才知道！
   要深刻的理解绝对定位absolute和浮动float,此处负margin是重头戏！参考《精通CSS 高级标准web解决方案》

   Over，第一篇技术文分享。有错误的地方，大家敬请指出！！！进步进步进步！！！！！

   刚刚还傻傻的用代码发芽网一次次的贴代码来着，原来帖子这样写啊~长见识长见识。。。。。嘻嘻