作者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