css - 造型人物和形象说明

Question

我想知道我是否以及如何使用我已经拥有的当前 html/css 在 css/html 中实现以下外观:

我想要第一个(红色):http://i.stack.imgur.com/tcnVx.jpg

-我有第二个(蓝色)/第三个(绿色)工作-我希望 img(紫色 F)跨越整个部分的宽度，也有一定的高度(部分高度的 80%)。让图像像图像一样填充这个空间

-我希望 img 可以点击(打开灯箱)

-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

• 对于结构

上面的 Vann'Tile lanito 代码很好。只需要将所有元素放在父容器中

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

CSS:

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

• 用于灯箱

使 img 可点击(打开灯箱)。您必须使用 jQuery 来完成它。你不能为灯箱使用这样的插件:-

Fancybox

lightbox2等

如果您正在寻找响应式灯箱:

Lightbox/Responsive

Dimsemenov plugins等