html - 使用 'top' css 属性防止文本进入图像

Question

我下面有一张图片，下面有 2 个不同的段落 --- 由于图片的形状，我面临着将图片左侧的文本保持在正确位置的问题。 See jsfiddle here to get a clearer idea图像的外观。

我在实现代码时遇到的问题是，当屏幕变小时，左侧的文本会向上推到图像中。有谁知道我该如何防止这种情况。

如果您在 jsfiddle 中缩小屏幕，您将看到左侧的文本进入图像。这是因为以下几行:

.left { 
   position: relative; 
   top: -100px; 
}

也许我需要为不同的屏幕尺寸不断编写媒体查询？希望不会，但到目前为止，这是我能想到的唯一解决方案。

查看下面的完整代码。

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*='col-'] {
  float: left;
}

.col-1-2 {
  width: 50%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  padding-right: 20px;
}

[class*='col-']:last-of-type {
  padding-right: 0;
}

.left {
  position: relative;
  top: -100px;
}

img {
  width: calc(100% - 1.2em);
  display: block;
}

.img-wrap {
  display: inline-block;
  position: relative;
  width: 100%;
}

<div class="img-wrap">
  <img class="section-img" src="http://i.stack.imgur.com/LcAqZ.jpg">
</div>

<div class="bottom-section">
  <div class="grid">
    <div class="left col-1-2">
      <h3>Test</h3>
      <p>Test test</p>
    </div>
    <div class="col-1-2">
      <h3>Test</h3>
      <p>Test</p>
    </div>
  </div>

Answer 1

我认为这种方法无法以可接受的方式实现。由于背景是图像的一部分，它会随之调整大小，这就是导致文本向上滑入图像的原因。

我的建议是，将图像分成两部分并创建以下结构:

• 将整个东西放在相对定位的 div 中
• 将您的图片一分为二并将它们放在您的列中。
• 将文本放入包装 div 中，以便您更轻松地控制它们
• 将文本放在列中 .img-wrap div 的旁边
• 使用定位和边距对齐列内的元素
• 使用 CSS 创建 VS 徽章

请注意，这是一个非常粗略的示例(我使用了一些生成的图像来展示如何将它们组合在一起)。此外，一些定位值可能不完全准确。这只是为了向您展示这个想法。

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*='col-'] {
  float: left;
}

.col-1-2 {
  width: 50%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  padding-right: 20px;
}

[class*='col-']:last-of-type {
  padding-right: 0;
}

.details {
  height: 50px;
}

.right .details{
  position: absolute;
  bottom: -50px;
}

.right .img-wrap {
   margin-top: 50px;
}

img {
  width: calc(100% - 1.2em);
  display: block;
}

.img-wrap {
  display: inline-block;
  position: relative;
  width: 100%;
}

.item {
	position: relative;
}

.vs {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px - 0.3em);
  background-color: #fff;
  width: 50px;
  height:50px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  border-radius: 25px;
}

<div class="item">
<div class="img-wrap">
  <div class="grid">
    <div class="col-1-2">
      <div class="img-wrap">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" class="img-wrap" />
      </div>
      <div class="details">
        <h3>Test</h3>
        <p>Test test</p>
      </div>
    </div>
    <div class="col-1-2 right">
      <div class="details">
        <h3>Test</h3>
        <p>Test</p>
      </div>
      <div class="img-wrap">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" class="img-wrap" />
      </div>
    </div>
  </div>
  <div class="vs">VS</div>
</div>