iT邦幫忙

0

css 圖片與文字並排,換列後位置交換

各位大大您好:

我的程式碼如下圖,不知道jsfiddle顯示不出來..:
https://jsfiddle.net/d0pt2vqr/1/
https://ithelp.ithome.com.tw/upload/images/20180713/20097057zLTsdQEdc7.png

想請問第一排 圖在左邊 文字在右邊
第二排會變成 圖在右邊 文字在左邊
然後滾輪縮小 圖片跟文字間的間隔隔也不會變大..
https://ithelp.ithome.com.tw/upload/images/20180713/20097057oK8bBJ7uOh.png

謝謝~~

1 個回答

0
froce
iT邦高手 1 級 ‧ 2018-07-13 13:36:14
最佳解答

https://jsbin.com/borokeqodu/1/edit?html,output
這樣?
用flex達成。

我只拿掉了left/rightside的class,去掉了一些你不必要的css,和利用flex改變順序而已。

然後寫範例也要好好縮排啊,多花了點時間看你的html結構...

mayyola iT邦新手 3 級 ‧ 2018-07-13 15:16:54 檢舉

sorry,沒有排版>"< 請問f大,您知道要怎麼滑鼠縮小視窗比例後,位置還是固定在中間,然後圖跟文字間隔還是等比例嗎?

剛剛覺得圖跟字離左右太近,想更中間一點在

.teachers{

padding-right:10%;
padding-left:10%;

}

這樣好像可以,但有其他更好的方法嗎? 謝謝

froce iT邦高手 1 級 ‧ 2018-07-13 16:08:09 檢舉

https://jsbin.com/jupuserufe/edit?html,output
這樣?
在flex裡加個:justify-content:center
然後你那個圓框...我總覺得切換解析度一定會跑掉,幹嘛不用border做?
幫你改了一下。

你要用svg做也ok,但至少圓心擺在svg的中心,要不然svg放大縮小你的圖要怎麼跟他對齊?

mayyola iT邦新手 3 級 ‧ 2018-07-13 16:48:55 檢舉

可以了耶~謝謝/images/emoticon/emoticon41.gif

我要發表回答

立即登入回答