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