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

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

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

2 个答案: