[問題] CSS要令兩個div等長的方法

看板Web_Design作者 (victory)時間15年前 (2010/04/24 19:06), 編輯推噓7(708)
留言15則, 6人參與, 最新討論串1/1
我有兩個div (其實就是sidebar 跟 content) 而我想在兩個中間弄條線( 也就是 border-left 1px solid #000 或border-right) 但是 發生了一個問題 (」°□°)」 當被設定線條那個比較短的時候,就會有下半部露出(謎:是沒線啦!!)的問題 請問,該如何解決這個問題呢??? 假設真的不行...就只想到用在content內建很多<br /> 令它一定會sidebar長這個方法了 希望高手能不吝賜教╭(_ _)╮ -- 以下是由資料是清末民初時街頭巷尾的鄉民所口述: 「出現啦!是孫中山先生的一秒十次革命!!」「聽說中華民國國旗的紅色是孫中山先生 用幾十個清兵的血所染成的。」「你們看!孫中山先生讓紫禁城興奮了!!」「愚民,要 稱他為孫中山先生,不是孫中山大人!」「出現啦!是孫中山先生的殺人彩券扁擔!」             「Go to KMT! Go to KMT!」 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 180.218.250.173

04/24 19:10, , 1F
附上頁面會比較清楚
04/24 19:10, 1F
不好意思沒辦法附頁面,因為是內部系統 可以試試以下: #A { border:1px solid #000; } #B { width:150px; float:left; } #C { width:300px; float:left; } -- <div id="A"> <div id="B"> 123 </div> <div id="C"> 456<br /><br /> </div> </div> 這中間的兩個div 如何讓他們中間有條線,而且這條線必然會到底 ※ 編輯: victer0327 來自: 180.218.250.173 (04/24 19:24)

04/24 19:24, , 2F
兩個div有母div嗎?在母div用background-image劃線
04/24 19:24, 2F

04/24 19:25, , 3F
樓上說的母div是我簡介中的A嗎??
04/24 19:25, 3F

04/24 19:27, , 4F
可參考RGBA網頁superpai寫的解法
04/24 19:27, 4F

04/24 19:28, , 5F
對 在A加背景吧
04/24 19:28, 5F
感謝兩位,原來有這方法(筆記ing) 不知道是否有用CSS就可以搞定的方法呢?? (一直在幻想CSS可以美工萬能~哈)

04/24 19:37, , 6F
你這樣A B C 的height 設一樣 不就可以了?
04/24 19:37, 6F
^^^^^^^^^^^^^^^^^^^^^ Rocky大,你忘記考慮,資料是有變動性的問題喔 不妨可以實際測試 測試方法:divC 裡放篇複製貼上的奇摩新聞,BC的height都設定為10px 試試看摟^.< ※ 編輯: victer0327 來自: 180.218.250.173 (04/24 19:53)

04/24 19:55, , 7F
要延伸~那就用min-height不就好了
04/24 19:55, 7F

04/24 19:59, , 8F
若純粹只要這需求的話 不需要用圖啦 太累贅了
04/24 19:59, 8F
Rocky大是對的!!!!!!! 原來有min-height這招(筆記ing) 我們為Rocky大敬禮 (  ̄□ ̄)/ <( ̄ㄧ ̄ ) <( ̄ㄧ ̄ ) ※ 編輯: victer0327 來自: 180.218.250.173 (04/24 20:08)

04/24 20:13, , 9F
有的 css table 不過IE6.7 不支援 母div寫display:table
04/24 20:13, 9F

04/24 20:14, , 10F
兩個要等長的div寫display:table-cell (最小高IE6也不吃喔)
04/24 20:14, 10F

04/24 20:20, , 11F
IE6 不吃min-height 但ie6的height = min-height
04/24 20:20, 11F

04/24 20:22, , 12F
所以這需求來說寫min-height + _height 即可跨瀏覽器
04/24 20:22, 12F

04/24 20:23, , 13F
用最小高另一方比較長還是會漏餡耶 通常都用pai的那個方法
04/24 20:23, 13F

04/24 20:24, , 14F
css table很好用 也可以用看看 (請忽略IE6.7 XD)
04/24 20:24, 14F

04/24 20:34, , 15F
IE6可以忽略掉了啦=.= Google都放話說不鳥IE6了
04/24 20:34, 15F

04/24 23:05, , 16F
感謝樓上,這方法也很有趣^^ ※ 編輯: victer0327 來自: 180.218.250.173 (04/25 02:46)
文章代碼(AID): #1Bqj3HPf (Web_Design)