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

[forkome (初心者)]

請教一下這題，有人知道怎麼做到圖片放在字的上方嗎？小弟試了好久，沒招了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
→ RedMapleWing:下面css是給死的還是可以自己打？
→ RedMapleWing:可以自己打的話，p跟img的position都設absolute
→ RedMapleWing:然後一個設img設top:0，p設bottom:0應該可以
→ RedMapleWing:但section應該要設死高
→ mmis1000:img設 transform:translate(0px,-25px) 就會壓在字上了
推 geniuswen:float the img
推 hans5300609:其實這題是用flex box，只要img設定order:-1就可以了
→ hans5300609:解答by講師 (學校請人來準備考這個...但應該無用)
推 hans5300609:DOFI Lab 羅老師 這樣www
→ forkome:absolute雖然可以移動，但圖移上去後，下方空間不會縮
→ forkome:試出來了.sale-item設display:flex;flex-direction:column
→ forkome:.sale-item > img設 order:-1;