在我的网站文件中,我试图在瞄准镜的左侧显示一系列图像,并使图像上的文字信息粘贴在页面右侧的顶部。我尝试了粘顶,dataspy =“ affix”和其他多种方法,但没有骰子。
这是我的意思的示例:
http://imgur.com/T8Vo0JC
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-6 col-sm-9">
<img id="constructedimage" src="images/small1.jpg">
</div>
<div class="col-md-6 col-sm-9">
<p class="pstylefooter">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac </p>
</div>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-6 col-sm-9">
<p class="pstyle">PROCESS WORK</p>
<img id="constructedimage" src="images/small1.jpg">
</div>
</div>
</div>
最佳答案
您可以使用position: sticky
* {margin:0;padding:0;}
body {
line-height: 1;
}
.sticky {
position: sticky;
top: 0;
background: rgba(255,255,255,0.5);
margin-left: 50%;
padding-left: 1em;
}
div {
margin: 0 0 2em;
}
img {
max-width: 50%;
}
<div>
<p class="sticky">text</p>
<img id="constructedimage" src="https://previews.123rf.com/images/farang/farang1201/farang120100040/11875191-Amazing-sunset-scene-Long-exposure-shot-vertical-panoramic-composition-Stock-Photo.jpg">
</div>
<div>
<p class="sticky">more text</p>
<img id="constructedimage" src="https://previews.123rf.com/images/farang/farang1201/farang120100040/11875191-Amazing-sunset-scene-Long-exposure-shot-vertical-panoramic-composition-Stock-Photo.jpg">
</div>
关于html - 是否有可能使文本在 bootstrap 中发粘?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43548859/