html - CSS 两个网格 DIV，图像和文本让我停电

Question

我玩这个网格有一段时间了，它是一个双网格系统，我试图在其中添加两个不同的图像。我已经成功添加了图像。但是，当我尝试为我想放置在图像上的文本制作两个单独的容器时，一切都出错了。几个小时以来我一直在努力解决这个问题，但没有结果。

我确实成功地用一栏在图像上添加了文本。然而，这两列就是不让我。

解决这个问题的最佳方法是什么？

CSS

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

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

/*  GROUP  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  TWO GRID  */
.span_2_of_2 {
width: 100%;
height: auto;
}
.span_1_of_2 {
width: 49.5%;
height: auto;
}
.span_2_of_2 img {
width: 100%;
height: auto;
}
.span_1_of_2 img {
width: 100%;
height: auto;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.col { 
margin: 0% 0 0% 0%;
 }
}

@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}

HTML

<div class="section-ad group">
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-sale-large.jpg?11274335160121521292" />
</div>
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-plain-x450_ab05c8e5-7269-4d98-b510-8ba5127db9c4.jpg?13010707129353802904" />
</div>
</div>

最好的问候， 罗宾。

Answer 1

您可以按照以下方式将文本放在图像上。

在 col div 中添加 span 并在其中添加文本。并将position:absolute 和parent div 赋给position:relative;。然后您可以使用左右值设置它的位置。

.section-ad {
clear: both;
padding: 0px;
margin:0;
}

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

/*  GROUP  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  TWO GRID  */
.span_2_of_2 {
width: 100%;
height: auto;
}
.span_1_of_2 {
width: 49.5%;
height: auto;
}
.span_2_of_2 img {
width: 100%;
height: auto;
}
.span_1_of_2 img {
width: 100%;
height: auto;
}

span {
    color: #000000;
    font-size: 25px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.col { 
margin: 0% 0 0% 0%;
 }
}

@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}

<div class="section-ad group">
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-sale-large.jpg?11274335160121521292" />
<span>Some text</span>
</div>
<div class="col span_1_of_2">
<img src="https://cdn.shopify.com/s/files/1/0786/5107/files/main-plain-x450_ab05c8e5-7269-4d98-b510-8ba5127db9c4.jpg?13010707129353802904" />
<span>Some text</span>
</div>
</div>