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
}**

For Light box

使img可点击（打开灯箱）。你必须使用jQuery来做到这一点。您可以使用灯箱插件，例如： -

Fancybox

lightbox2等。

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

Lightbox/Responsive

Dimsemenov plugins等。

Answer 2

我认为这是你想要实现的目标。设计图形，图像和图形。

＆＃13;

*{
    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%;
}

＆＃13;

<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>

＆＃13;

如果您还需要其他内容，请发表评论。如果有帮助，请+1。

造型图＆amp; figcaption

2 个答案: