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

css html

mayyola 2018-07-13 12:06:29 ‧ 7667 瀏覽

各位大大您好:

我的程式碼如下圖，不知道jsfiddle顯示不出來..:
https://jsfiddle.net/d0pt2vqr/1/

想請問第一排圖在左邊文字在右邊
第二排會變成圖在右邊文字在左邊
然後滾輪縮小圖片跟文字間的間隔隔也不會變大..

謝謝~~

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

froce

iT邦大師 1 級 ‧ 2018-07-13 13:36:14

最佳解答

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

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

mayyola iT邦研究生 1 級 ‧ 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邦研究生 1 級 ‧ 2018-07-13 16:48:55 檢舉

可以了耶~謝謝

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22208 篇

完賽人數

600 人

IT邦幫忙