作者forkome (初心者)
看板Web_Design
標題Re: [討論] 鴻海的五零高手選秀
時間Fri Apr 11 16:50:07 2014
請教一下這題，有人知道怎麼做到圖片放在字的上方嗎？小弟試了好久，沒招了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://webptt.com/m.aspx?n=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
1F：→ RedMapleWing:下面css是給死的還是可以自己打？ 04/11 18:00
2F：→ RedMapleWing:可以自己打的話，p跟img的position都設absolute 04/11 18:00
3F：→ RedMapleWing:然後一個設img設top:0，p設bottom:0應該可以 04/11 18:01
4F：→ RedMapleWing:但section應該要設死高 04/11 18:01
5F：→ mmis1000:img設 transform:translate(0px,-25px) 就會壓在字上了 04/11 18:52
6F：推 geniuswen:float the img 04/12 11:39
7F：推 hans5300609:其實這題是用flex box，只要img設定order:-1就可以了 04/13 12:10
8F：→ hans5300609:解答by講師 (學校請人來準備考這個...但應該無用) 04/13 12:12
9F：推 hans5300609:DOFI Lab 羅老師 這樣www 04/13 12:16
10F：→ forkome:absolute雖然可以移動，但圖移上去後，下方空間不會縮 04/15 08:16
11F：→ forkome:試出來了.sale-item設display:flex;flex-direction:column 04/15 08:44
12F：→ forkome:.sale-item > img設 order:-1; 04/15 08:44