Question

在我的网站文件中，我试图在视线的左侧显示一系列图像，并且图像的文本信息会粘贴在右侧页面的顶部。我尝试过粘贴式，dataspy =＆＃34;粘贴＆＃34;以及其他多种东西，但没有骰子。

这是我的意思的一个例子： 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>

Answer 1

您可以使用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>

是否可以在引导程序中粘贴文本？

1 个答案: