首頁(yè) 猿問(wèn) 圖像與文本重疊

圖像與文本重疊

JavaScript

慕田峪9158850 2023-10-14 16:10:23

你好，我是編碼新手。我的圖像與“關(guān)于我們”部分中的文字重疊。在教程中，我看到文本位于圖像旁邊。它不與它重疊。有什么幫助嗎？* { 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>我該如何解決這個(gè)問(wèn)題？

查看完整描述

1 回答

互換的青春

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊

您的inline-block對(duì)象將并排放置并提供兩個(gè)對(duì)象，width of 100%以便它們將采用各自父對(duì)象的寬度。最后，對(duì)于文本，我給出了overflow-wrap: break-word這樣的文本不會(huì)與圖像一起折疊

* {

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;

}

<p>udgugqguugdugwugugugduqugdgqwuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh.

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

</p>

</div>

</div>

</section>

工作小提琴

反對(duì) 回復(fù) 2023-10-14