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时应注意两个要点：

浮动容器应设置为特定宽度（绝对或相对宽度）
clear所有浮动项目

您应该稍微更改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来查看图片。希望这会有所帮助。

Answer 2

使用浮点数的缺点是，它会干扰自然的文档流。您可能要考虑使用flexbox的替代方法。

.firstsection {
  display: flex;
}

.firstpic {
  width: 300px;
  /*this width is equal with its image's width */
}

.description {
  width: calc(100% - 300px);
}

<div class="howtocontainer">
  <div class="firstsection">
    <div class="firstpic">
      <img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/01.jpg">
    </div>
    <div class="description">
      <div class="firstsecbanner">
        <img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/firstsecbanner.png">
      </div>
      <div class="firstsectext">
        お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br> してください。
        <br> 最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ
        <br> ティックな気分を高めることができます。
        <br><br> 性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。
        <br> シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を
        <br> 見つけてください。
      </div>
    </div>
  </div>
  <div class="secondsection"></div>
  <div class="thirdsection"></div>
</div>

在DIV中定位内容

2 个答案: