Re: [討論] 鴻海的五零高手選秀

看板Web_Design作者 (初心者)時間11年前 (2014/04/11 16:50), 11年前編輯推噓3(309)
留言12則, 5人參與, 最新討論串2/2 (看更多)
請教一下這題,有人知道怎麼做到圖片放在字的上方嗎?小弟試了好久,沒招了QQ <section class='sale-item'> <p>「TQC+ 電腦繪圖設計認證 Illustrator CS6」,係為TQC+ 視傳設計領 域之電腦繪圖設計認證能力鑑定,以實務操作方式進行認證,評核符合企業需求的新時代 專業設計人才。亦為考核「平面設計專業人員」與「Flash動畫設計專業人員」必備專業 技能之一。</p> <img src='images/AEY028900S.jpg' alt='TQC+ 電腦繪圖設計認證 Illustrator CS6'> </section> ‧方法要使用CSS #deals { display: flex; } .sale-item { word-wrap: break-word; word-break: break-all; width:200px; margin:10px; padding:5px; background-color:#b7b1b1; border-radius:10px; } .sale-item > img { display: block; margin:0 auto; box-shadow:3px 2px 5px #808080; } ※ 引述《hans5300609 (屏商院資工系xD)》之銘言: : 主辦單位: : 台北市電腦商業同業公會 : 鴻海精密工業股份有限公司 : 協辦單位:財團法人電腦技能基金會(TQC) : http://www.tqcplus.org.tw/ict50/method.aspx : 選秀試題: : 「HTML5技能指標WPDSS (Webpage Program Design Skill Standards)」進行選秀評量。 : 規範內容與範例試題下載:http://www.tqcplus.org.tw/ict50/examSample.aspx : 鴻海找TQC辦這個到底是找人才還是打廣告呢? : 還是說跟鴻海加入4G電信業有關?? : 上面還有沒答案的範例試題 : 不過大部分我都不會(掩面 : 順便問一下ICT產業是什麼? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.87.161.130 ※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1397206210.A.757.html ※ 編輯: forkome (219.87.161.130), 04/11/2014 16:55:30 ※ 編輯: forkome (219.87.161.130), 04/11/2014 17:15:02 ※ 編輯: forkome (219.87.161.130), 04/11/2014 17:15:25

04/11 18:00, , 1F
下面css是給死的還是可以自己打?
04/11 18:00, 1F

04/11 18:00, , 2F
可以自己打的話,p跟img的position都設absolute
04/11 18:00, 2F

04/11 18:01, , 3F
然後一個設img設top:0,p設bottom:0應該可以
04/11 18:01, 3F

04/11 18:01, , 4F
但section應該要設死高
04/11 18:01, 4F

04/11 18:52, , 5F
img設 transform:translate(0px,-25px) 就會壓在字上了
04/11 18:52, 5F

04/12 11:39, , 6F
float the img
04/12 11:39, 6F

04/13 12:10, , 7F
其實這題是用flex box,只要img設定order:-1就可以了
04/13 12:10, 7F

04/13 12:12, , 8F
解答by講師 (學校請人來準備考這個...但應該無用)
04/13 12:12, 8F

04/13 12:16, , 9F
DOFI Lab 羅老師 這樣www
04/13 12:16, 9F

04/15 08:16, , 10F
absolute雖然可以移動,但圖移上去後,下方空間不會縮
04/15 08:16, 10F

04/15 08:44, , 11F
試出來了.sale-item設display:flex;flex-direction:column
04/15 08:44, 11F

04/15 08:44, , 12F
.sale-item > img設 order:-1;
04/15 08:44, 12F
文章代碼(AID): #1JHwp2TN (Web_Design)
文章代碼(AID): #1JHwp2TN (Web_Design)