在网格中的图像上创建一个带有文本的框

Question

我正在尝试创建一个包含 3 列中的 12 个图像的网格视图，每个图像的底部都有一个文本框覆盖。在我尝试将文本框放在顶部之前，我的网格工作得很好。我觉得带有文本的框应该是图像的子级，但我不知道该怎么做。

我目前只将这些类应用于第一个图像，以尝试在移动到其他图像之前使其正常工作。我也遇到了试图让文本在框中间对齐的问题。如果有人可以帮助我解决这些问题中的一个/两个，将不胜感激！

这是我的 CSS：

section{
width: 940px;   
min-height: 400px;
margin: 0 auto;
padding: 10px 0 0 0;    
}

.grid-large {
margin: 16px 0 0 16px;
float: left;
}

.transbox {
height: 50px;
width: 300px;
margin-top: -50px;
background-color:#362e26;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}

.category-label{
color: #fff;
margin: 0;
margin-left: 15px;
margin-top: 5px;
vertical-align: middle;
}

.first {
margin-left: 0;
}

还有我的html：

<section>
<img src="./images/gowns.jpg" width ="300" height="300" class="grid-large.first">
<div class="transbox">
<p class="category-label">wedding gowns</p> 
</div>
<img src="./images/bridesmaid.jpg" width ="300" height="300" class="grid-large">
<img src="./images/menswear.jpg" width ="300" height="300" class="grid-large">

<img src="./images/venues.jpg" width ="300" height="300" class="grid-large.first">
<img src="./images/planners.jpg" width ="300" height="300" class="grid-large">
<img src="./images/photographers.jpg" width ="300" height="300" class="grid-large">
</section>

Answer 1

我会将图像设为 div 的背景图像，其中应包含文本标签，而不是尝试将 div 放在图像顶部。在具有背景图像的 div 中，您可以添加带有文本的新 div，并将它们放置在图像上您想要的任何位置。

类似这样的：

<div id="picturegrid">
    <div id="gowns">
        <p>Wedding gowns<p>
    </div>
</div>

和

#gowns { 
background: center transparent url(./images/gowns.jpg) no-repeat; 
}

此链接也可能对您有所帮助：http://web.enavu.com/tutorials/making-image-overlay-caption-using-css/

Answer 2

这是一个我认为可以满足您要求的 JSFiddle：http://jsfiddle.net/ZPcHc/

HTML：

<section>
<div class="row">
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
</div>
<div class="row">
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
</div>
<div class="row">
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
</div>
<div class="row">
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
</div>
</section

CSS：

section{
width: 940px;   
min-height: 400px;
margin: 0 auto;
padding: 10px 0 0 0;    
}

.imgbox{
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 30px;
}

.img{
    height: 50px;
    width: 50px;
    background-color: red;
}

.text{
    position: relative;
    bottom: -50px; /*height of your image*/
    left: 12px;
}

您可能想查看已实现网格的预制 CSS，例如 twitter-bootstrap 或 foundation

一旦您了解了这些要点，您就可以更快地开发网站！祝你好运