html - 在 DIV 中定位内容

Question

我想将图像左对齐，然后是它的标题，然后是它下面的文本。
这是 screenshot我想做的。
我做了DIV对于每个内容。我不知道这样做是否合适。
我做到了，因为我可以更好地控制个人内容。

但我还没能这样做。

.howtocontainer {
  height: 1985px;
  width: 1121px;
  background-image: url("//azlily.bex.jp/eccube_1/html/template/default/img/howto/background.png");
}

.firstsection {
  /*background: rgb(255,255,255,0.3);*/
  background: grey;
  height: 200px;
  position: relative;
  top: 300px;
  margin: 0 40px 0 40px ;
}

.firstpic {
  padding-top: 20px;
}

.firstsecbanner {
  float: right;
  margin-right: 500px;
  margin-top: -15px;
}

<div class ="howtocontainer">

  <div class="firstsection">

    <div class="firstpic">
      <img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
    <div class="firstsecbanner">
      <img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
    <div class="firstsectext">
      お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
      してください。<br>
      最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
      ティックな気分を高めることができます。<br><br>

      性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
      シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
      見つけてください。
    </div>

  </div>

  <div class="secondsection"></div>
  <div class="thirdsection"></div>

</div>

---

我所做的只是将图片和文字合二为一DIV
但是通过 <img class="class" src"path" > 给图像上了课
然后我做了float:left至 .img class .

Answer 1

关于使用float，您应该注意两个关键点:

• float 容器应设置特定宽度(绝对或相对宽度)
• 清除所有 float 元素

您应该稍微更改一下 HTML 结构，并添加一些 CSS 样式:

   
.firstpic {
  float: left;
  width: 300px; /*this width is equal with its image's width */
}

.description {
  float: left;
  width: calc(100% - 300px);
}

/* Clear floating item */
.firstsection::after {
  display: table;
  content: "";
  clear: both;
}

  <div class="firstsection">
    <div class="firstpic">
      <img src="the-image-on-left-side">
    </div>
    <div class="description">
      <div class="firstsecbanner">
        <img src="the-title-image-on-top">
      </div>
      <div class="firstsectext">
        お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
        してください。<br>
        最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
        ティックな気分を高めることができます。<br><br>

        性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
        シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
        見つけてください。
      </div>
    </div>
  </div>

请添加绝对 URL 而不是相对 URL 以查看您的图片。 希望这会有所帮助。