我下面有一个图像,下面有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>

最佳答案

我认为使用这种方法无法以可接受的方式做到这一点。由于背景是图像的一部分,因此会随之调整大小,这就是导致文本滑入图像的原因。

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


将整个内容放在相对定位的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>

关于html - 使用“顶部” css属性防止文本进入图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37992537/

10-12 07:35
查看更多