Question

当我调整浏览器页面的大小时，div框中的文本会经过该框，并且与页脚重叠。我该如何解决这个问题？

div也位于另一个div的旁边（左侧）。我希望解决这个问题而不需要很长的3个单词的句子，直到它触及底部。

整个网站都包含在一个容器中，该容器也用于适合页面。

#leftbox {
  position: absolute;
  left: 0;
  margin-top: 1rem;
  margin-right: 22rem;
  display: block;
}

footer {
  position: relative;
  right: 0;
  left: 0;
  display: block;
  padding: 4rem;
}

#rightbox {
position: absolute;
right: 1.25rem;
padding: 3rem;
padding-top: 13rem;
padding-bottom: 17rem;
margin-top: 1.5rem;
}

<div id="outer">
  <div id="rightbox></div>
  <div id="leftbox">*** *** ******* *** * ******* ********* **** ******** *** *** *** **** ****** ******* **** ************ * * ********* ******* ** ********* **** ******* *** ******** ********** ***** ***** ***** *** ******** ********* **** * ************** *************
    ******* **** ******** ********** ******** *** **** ************* ************** ****** ***** ****** *** *** **** ******** ** ******** ** *** *** ************ ** ** *********** ********* ******** ******* *** *** * ****** **** ****** ********* ** *****
    ******** ** ****** ******* ** * ****** ******* * ******* *** *** **** ****** *** ****** ** ****** *** ***** * ******** **** ***** ******** ********* ******* *** ***** ****** *** ****
  </div>
  <footer></footer>

Answer 1

如果我理解得很好，你想要那样的东西

HTML

<div id="outer"> 
  <div id="leftbox">****** ******* ** ********* **** ******* *** ******** ********** ***** ***** ***** *** ******** ********* **** * ************** ************* ******* **** ******** ********** ******** *** **** ************* ************** ****** ***** ****** *** *** **** ******** ** ******** ** *** *** ************ ** ** *********** ********* ******** ******* *** *** * ****** **** ****** ********* ** ***** ******** ** ****** ******* ** * ****** ******* * ******* *** *** **** ****** *** ***
  </div>
  <div id="rightbox">****** ******* ** ********* **** ******* *** ******** ********** ***** ***** ***** *** ******** ********* **** * ************** ************* ******* **** ******** ********** ******** *** **** ************* ************** ****** ***** ****** *** *** **** ******** ** ******** ** *** *** ************ ** ** *********** ********* ******** ******* *** *** * ****** **** ****** ********* ** ***** ******** ** ****** ******* ** * ****** ******* * ******* *** *** **** ****** *** ***</div>
  </div>

  <footer></footer>

和css

#leftbox {
position: relative;
    left: 0;
    padding: 3rem;
    max-width: 40%;
    display: inline-block;
    box-sizing: border-box;
}

footer {
  position: relative;
  right: 0;
  left: 0;
  display: block;
  padding: 4rem;
}

#rightbox {
position: relative;
    color: red;
    max-width: 40%;
    padding: 3rem;
    display: inline-block;
     box-sizing: border-box;
}

当我调整浏览器大小时，为什么我的文本会超过它的div框？

1 个答案: