造型圖和figcaption

Question

我想知道如果我如何能實現在CSS/HTML以下的外觀與目前的HTML/CSS我已經有：

我想要得到的第一（紅色）之一：http://i.stack.imgur.com/tcnVx.jpg

- 我有第二個（藍色）/第三個（綠色）的工作 - 我想img（紫色的F）跨越整個寬度的部分，也有一定的高度（80％的部分高度）。有圖像

-I希望IMG是可點擊（打開收藏夾）

-The figcaption圖像填補這個空間一樣有文字，應爲20％（這增加高達100％的總部分的）高度和中心（可能與行高這個我可以管理哈哈..）

到目前爲止我的代碼：

<section> 
<article class="graphic"> 
    <figure> 
     <img src="img/Graphic/final.png" alt="Image for graphic work"> 
     <figcaption>Final logo</figcaption> 
    </figure> 
</article> 

<article class="web"> 
    <figure> 
     <img src="img/Web/obbycmsmockup.png" alt="Image for web work"> 
     <figcaption>CMS webdesign for OBBYCMS</figcaption> 
    </figure> 
</article> 

<article class="misc"> 
    <figure> 
     <img src="img/Misc/ww4.jpg" alt="Image for other work"> 
     <figcaption>Graphic work for WhiteWizard</figcaption> 
    </figure> 
</article> 

Answer 1

我想這就是你什麼灣t來實現。造型的數字，圖像和figcaptions。

*{ 
 
    box-sizing:border-box; 
 
} 
 
article { 
 
    width:200px; 
 
    height:200px; 
 
    float:left; 
 
    margin:10px; 
 
    color:#FFF; 
 
} 
 
.web { 
 
    background:green 
 
} 
 
.misc { 
 
    background:blue 
 
} 
 
.graphic figure{ 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    background:#FFF; 
 
} 
 
.graphic figcaption{ 
 
    background:#F00; 
 
    color:#FFF; 
 
    width:100%; 
 
    height:20%; 
 
    text-align:center; 
 
    padding:5px; 
 
} 
 
.graphic img { 
 
    width:100%; 
 
    height:80%; 
 
} 
 
.web img, .misc img { 
 
    background:#FFF; 
 
    width:100%; 
 
    height:40%; 
 
}

<article class="graphic"> 
 
    <figure> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="Image for graphic work"> 
 
     <figcaption>Final logo</figcaption> 
 
    </figure> 
 
</article> 
 
<article class="web"> 
 
    <figure> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="Image for web work"> 
 
     <figcaption>CMS webdesign for OBBYCMS</figcaption> 
 
    </figure> 
 
</article> 
 
<article class="misc"> 
 
    <figure> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="Image for other work"> 
 
     <figcaption>Graphic work for WhiteWizard</figcaption> 
 
    </figure> 
 
</article>

如果您需要別的東西，評論。如果有幫助，+1。

Answer 2

• 對於結構

以上Vann'Tile lanito的代碼是好的。只需要把所有元素父容器

eg: <div class="container"><--all element inside this--></div> 

CSS：

**.container{ 
width: 100%; 
background: grey 
}** 

• 對於燈箱

爲了讓IMG點擊（打開燈箱）。 你必須使用jQuery來做到這一點。您CA使用插件收藏這樣的： -

Fancybox

lightbox2等

如果您正在尋找響應燈箱：

Lightbox/Responsive

Dimsemenov plugins等