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 内添加跨度并在其中添加文本。并将 position:absolute 和父级 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>

Answer 2

感谢大家的回复。

Ketan - 尽管您的解决方案有效，但它不符合我的需要。但是，多亏了您的答复，我才得以克服我的停电。所以无论如何我也欠你的。谢谢！

现在这可能是最好的方法，但我就是这样做的。

CSS

CSS

/*  TVÅ KOLUMN ADVERT # 705x450  */

.span_1_container {
  position: absolute;
  top: 80%;
  left: 25%;
  z-index: 0;
  padding: 0;
  padding: 1.2em;
  font-size: .5em;
  text-align: center;
  width: 45%;
}
.span_1_heading {
  font-size: 20px;
  line-height: 100px;
  display:inline-block;
  position: relative;
}

.span_2_container h2:before {
  content: '';
  border-top: 1px solid #383a4f;
  position: absolute;
  width: 25%;
  left: 35%;
  top: 50px;
}

.span_2_container {
  position: absolute;
  top: 25%;
  left: 0%;
  z-index: 0;
  padding: 0;
  padding: 1.2em;
  font-size: .5em;
  text-align: center;
  width: 45%;
}

.span_2_container h2:after {
  content: '';
  border-bottom: 1px solid #383a4f;
  position: absolute;
  width: 25%;
  left: 35%;
  bottom: 50px;
  padding-bottom: 20px;
}

<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?5000542013708637763" />
  <div class="span_1_container">
<a href="#" class="service_button">SHOP NOW</a></div>
</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 class="span_2_container">
    <h2 class="span_2_heading" style="font-weight: normal; color: #383a4f;">Pocketsquares</h2>
    <p style="font-family: 'Lato'; font-size: 14px; color: #383a4f; line-height: 15px; padding-bottom: 20px;">Explore our premium pocketsquares.</p>
<a href="#" class="advert_button">SHOP NOW</a></div>
  </div>
</div>

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

CSS Two grid DIVs, images and text gives me blackout

html

css

multiple-columns