Question

我一直在网上寻找答案而无法找到解决方案。我正在尝试显示图像，然后在下面直接有一个彩色块（附在图像的底部），用于图像上的标题。

下面是我的CSS代码和页面的HTML。我有这个css代码：

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 5.0%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FOUR  */
.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 73.75%;
}
.span_2_of_4 {
    width: 47.5%;
}
.span_1_of_4 {
    width: 21.25%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
    .col {  margin: 1% 0 1% 0%; }
    .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

/ ***** HTML代码：***** /

<div class="section group">
<div class="col span_1_of_4">
<img src="XXX" style="border-width: 1px; border-style: solid; width: 190px; height: 255px;" /></a>
            <br />
            <a href="XXX">TEXT HERE</a> 

            </div>

</div>

Answer 1

将图像和标题包装在同一个div中，并为该div添加背景颜色。

这是一个简单的例子：

<div id="wrapper">
   <img src="XXX" style="width: 190px; height: 255px;" />
   <a href="#">Text</a>
</div>


#wrapper {
   background: #ccc;
   display: inline-block;
}
   #wrapper a {
     text-align: center;
     display: block;
     padding: 10px;
   }

http://jsfiddle.net/eo9wfx5c/1/

Answer 2

.img-wrapper {
    background: #888;
    border-width: 1px; 
    border-style: solid; 
}

.img-wrapper img {
    width: 100%;
    padding-bottom: 50px;
}

<div class="section group">
    <div class="col span_1_of_4">
        <div class="img-wrapper">
            <img src="xxx">
            <br>
            <a href="XXX">TEXT HERE</a> 
        </div>
    </div>
</div>

在图像下方添加彩色块用于文本

2 个答案: