图像与文本重叠

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这样的文本不会与图像一起折叠

* {

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

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

section {

  padding: 100px;

}

.row .co150 {

  position: relative;

  display: inline-block;

  vertical-align: top;

  width: 48%;

}

 .co150 p {

   width: 100%;

   overflow-wrap: break-word;

   

   

 }

.imgBx {

  width: 100%;

}

.imgBx img {

 width: 100%;

 object-fit: contain;

}

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

  <div class="row">

    <div class="co150">

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

      <p>udgugqguugdugwugugugduqugdgqwuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

        jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh.

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

      </p>

    </div>

    <div class="co150">

      <div class="imgBx">

        <img src="https://i.picsum.photos/id/425/536/354.jpg?hmac=wBNHXWWIrsjZJiC-motCXU36RWkqnUAAPfVJulwHGHM">

      </div>

    </div>

  </div>

</section>

工作小提琴