作者elan (IE是最棒的浏览器)
看板Web_Design
标题Re: [问题] 问一下这 CSS 写法哪里有误呢
时间Sun Jul 30 23:15:36 2006
※ 引述《sweetwords (米虫三号)》之铭言：
: http://uflc.nccu.edu.tw:8080/uflc_web/test/web_test/5/css/Css.css
: 这是我现在在写这一页的 CSS 编辑
: http://uflc.nccu.edu.tw:8080/uflc_web/test/web_test/5/
: 很奇怪的是，为啥下面那张图跟 1212 数字那一个 <div>
: 无法包在我主体 container 底下，
你有一个
#container区块 里面只有两个floated element
一个为
#left_block(floated left)
一个为
#right_block(floated right)
只有floated element的container区块大小不会随之扩展包住子element是很正常的
解决方法有二:
1. 在你的
#right_block之後多加一个block-level的element, 给它clear:both的css属性
(你的网页应该还没设计完吧?
#right_block之後应该还有东西要加进去)
2. 或者是, 你不打算在
#right_block之後再加别的markup, 那就利用css加入这个clearing element,
加入以下的css到你的stylesheet
#container:after {
display: block;
clear: both;
content: ".";
width: 0;
height: 0;
visibility: hidden;
/* 写到这里应该就可以了 为了更保险 我会多写: */
overflow: hidden;
text-indent: -1000px;
}
: 反而跑到外面来了 >"<
: 在 FF 下看不正常，可是在 IE 下看就正常，到底是我 CSS
^^^^^^^^^^^^^^^^^^^^
至目前IE6 并不支援:after选择器 (IE7有没有支援,我需要去查证,或版上知道的人请回馈一下)
而且本来你的
#container并无clearing element,
那为什麽用IE看就没问题呢? 那是因为你的
#container给了width:800px
这也正好是IE解决floats enclosing的workground (就是给container高度或宽度)
既然你已设定了
#container的宽度 我们也免了去使用一些hacks来解决IE上面的问题
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 220.131.18.85
※ 编辑: elan 来自: 220.131.18.85 (07/30 23:19)
※ 编辑: elan 来自: 220.131.18.85 (07/30 23:27)
※ 编辑: elan 来自: 220.131.18.85 (07/30 23:28)
1F：推 sweetwords:感谢 用第一个方法已经解决了 <0> 07/30 23:34
2F：推 weipuyan:详细~大推~推推推 07/31 02:40