台灣最大程式設計社群網站
線上人數
1081
 
會員總數:240323
討論主題:186326
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> Div的浮動排列問題 CSS
[ 變換順序 ]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
Div的浮動排列問題 CSS
價值 : 50 QP  點閱數:366 回應數:7

樓主

CY
門外漢
0 2
64 4
發送站內信

簡單說
目的是想做出可以隨視窗大小的變化,跟內部方塊一起跑的div外框(?)。
然後目前卡關了
喬了很久
外圍的框線還是只會黏在視窗周圍,不會和方塊一起移動。


我有數十個固定大小的方塊,希望它們能隨著視窗大小由左至右排列。
這些方塊最外圍由一個div的框線圍住。
希望能讓最外圍的框線隨著視窗大小的移動,完美的貼合內部的方塊。


精簡版test.html檔程式碼如下:




不知道各位前輩們有什麼看法呢?
感激不盡~

搜尋相關Tags的文章: [ div ] , [ 浮動排列 ] ,
本篇文章發表於2016-12-18 01:45
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
不錯的參考

Daimom
捐贈 VP 給 Daimom 檢舉此回應
寬度改用vw 或是 em為單位
參考
本篇文章回覆於2016-12-19 08:19
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

不能說的阿
檢舉此回應
感謝前輩的熱心指導,又多學了一招。
但我的問題主要是在外面框線的部分
請容許我用圖解說明

如圖所示,當只有一個方塊的時候,表現正常


如圖所示,方塊數量未超出原有視窗寬度的時候,表現也正常


如圖所示,當方塊數量超出視窗寬度的時候,就出現問題了,右側的藍色框線開始不會完美貼合內部方塊邊緣了





依舊無解
本篇文章回覆於2016-12-19 13:56
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
不錯的參考

Daimom
捐贈 VP 給 Daimom 檢舉此回應
圖片異常。
建議你將程式碼放到Js bin或類似的網站
本篇文章回覆於2016-12-19 16:37
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

不能說的阿
檢舉此回應
https://jsfiddle.net/9vob48r3/4/

我放在jsfiddle上囉
問題:
只要動態排列一運作
框線就沒辦法完美的貼合方塊了

不曉得有沒有解決方法能讓外面的藍色方框完美貼合內部方塊

本篇文章回覆於2016-12-20 00:48
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
回應

Daimom
捐贈 VP 給 Daimom 檢舉此回應
修改成這樣

建議你多使用瀏覽器的除錯模式,去查出你要修改的地方的css是哪一塊。
本篇文章回覆於2016-12-20 09:08
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
最有價值解答

clouding
捐贈 VP 給 clouding 檢舉此回應
感覺這要靠javascript去控制
我已經想不到其他方法了
希望其他大大解答


本篇文章回覆於2016-12-20 16:41
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
7樓
作者回應

我也是醉了
檢舉此回應
謝謝clouding前輩以及Daimom前輩的熱心指導。

原來可以用jquery處理它
絞盡腦汁好幾天總算突破盲腸
差點被排版弄死

再次感謝clouding前輩以及Daimom前輩的大力協助


以下是參考Daimom前輩的建議以及clouding前輩的html檔案調整做出來html檔
總算解決視窗拉來拉去,框線不會跟著跑的問題。





感謝大家
本篇文章回覆於2016-12-20 20:06
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
[ 變換順序 ]   
1

回覆
如要回應,請先登入.