图像与文本重叠

Question

你好，我是编码新手。我的图像与“关于我们”部分中的文字重叠。在教程中，我看到文本位于图像旁边。它不与它重叠。有什么帮助吗？

* {

  font-family: "Poppins ", sans-serif;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

section {

  padding: 100px;

}

.row {

  position: relative;

  width: 100%;

  display: flex;

  justify-content: space-between;

}

.row .co150 {

  position: relative;

  width: 48%;

}

<section class="about " id="about ">

  <div class="row ">

    <div class="co150 ">

      <h2 class="titleText "><span>A</span>bout Us</h2>

      <p>udgugqguugdugwugugugduqugdg qwuuuuuuuuuuu uuuuuuuuuuuuuuuuuuuuu aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzz zzzzzzzzzzz mmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmm

        jjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjj hhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhh.

        <br><br>lorem ipsum dolores umbridge x her husband blalalalallllllllllllllllllllllll .

      </p>

    </div>

    <div class="co150 ">

      <div class="imgBx ">

        <img src="img1.jpg ">

      </div>

    </div>

  </div>

</section>

我该如何解决这个问题？

Answer 1

您的inline-block对象将并排放置并提供两个对象，width of 100%以便它们将采用各自父对象的宽度。最后，对于文本，我给出了overflow-wrap: break-word这样的文本不会与图像一起折叠* {&nbsp; font-family: "Poppins", sans-serif;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; box-sizing: border-box;}section {&nbsp; padding: 100px;}.row .co150 {&nbsp; position: relative;&nbsp; display: inline-block;&nbsp; vertical-align: top;&nbsp; width: 48%;}&nbsp;.co150 p {&nbsp; &nbsp;width: 100%;&nbsp; &nbsp;overflow-wrap: break-word;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;}.imgBx {&nbsp; width: 100%;}.imgBx img {&nbsp;width: 100%;&nbsp;object-fit: contain;}<section class="about" id="about">&nbsp; <div class="row">&nbsp; &nbsp; <div class="co150">&nbsp; &nbsp; &nbsp; <h2 class="titleText"><span>A</span>bout Us</h2>&nbsp; &nbsp; &nbsp; <p>udgugqguugdugwugugugduqugdgqwuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm&nbsp; &nbsp; &nbsp; &nbsp; jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh.&nbsp; &nbsp; &nbsp; &nbsp; <br><br>lorem ipsum dolores umbridge x her husband blalalalallllllllllllllllllllllll .&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="co150">&nbsp; &nbsp; &nbsp; <div class="imgBx">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.picsum.photos/id/425/536/354.jpg?hmac=wBNHXWWIrsjZJiC-motCXU36RWkqnUAAPfVJulwHGHM">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></section>工作小提琴