0
我會嘗試以明確的方式闡明問題的最佳方式。在寫長文本時，我的div與其容器重疊
在我的網站設計中，我得到了width:90%;的所有div（網站的所有部分），在div的兩側給出5% margin，使它們「居中」。我通過設置apropiate寬度和margin: 0 auto;來實現這個工作。
我正在研究Django的模板，所以對於我正在編寫的頁面，我現在正在擴展到'base.html'。這意味着我擴展了包含header和navigation菜單的前兩個div。在頁面底部還有一個footer div，在它們之間有我現在添加的內容。
在這個中央內容div中，我希望它的結構是類似垂直的，20% width浮在左邊，兩個'content'div緊挨着它，剩下所有的空間。這裏有一個例證：
CODE：
* {
margin: 0;
padding: 0;
}
#content {
width: 90%;
margin: 0 auto;
background-color: lightyellow;
height: 80%;
}
.textoh {
width: 20%;
height:75%;
background-color: darkgrey;
margin: 5px;
display: inline-block;
border-radius: 6px;
padding: 1em;
}
.textoup {
width: 95%;
height: 60%;
background-color: lightgreen;
margin: 5px;
border-radius: 6px;
display: inline-block;
}
.textodown {
width: 95%;
height: 30%;
background-color: lightpink;
margin: 5px;
display: inline-block;
border-radius: 6px;
}
.wrap {
background-color: lightblue;
position: absolute;
display: inline-block;
width: 70%;
margin: 10px;
border-radius: 6px;
}<div id="content">
\t <div class="textoh">
\t \t <ul>
\t \t \t <li>INFO</li>
\t \t \t <li>ABOUT</li>
\t \t \t <li>LINKS</li>
\t \t \t <li>OTHERS</li>
\t \t </ul>
\t </div>
<div class="wrap">
\t <div class="textoup">
\t \t <h1>TITLE TITLE TITLE</h1>
\t \t <h3>DESCRIPTION DESCRIPTION</h3>
\t </div>
\t <div class="textodown">
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
\t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
\t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
\t \t \t \t consequat.</p>
\t \t \t \t <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
\t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
\t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
\t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
\t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
\t \t \t \t consequat.</p>
\t \t \t \t <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
\t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
\t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
\t </div>
</div>
</div>不過，我十分的問題。在編寫更長的'lorem'文本時，.textodown div與.wrap都脫離#content div，重疊頁腳。
我想它包含所有的「內容」 DIV裏面，如果.textodown或.wrap越來越更大的高度，使#content DIV做大，而不是超越它。
我不是英語的人，所以我不知道問題是否清楚，我真的很感激幫助，如果不明白，我會很高興發佈一些圖片或任何必要的。
究竟如何你想讓它具有更長的內容的行爲？一種解決方案可能是「overflow：auto」。嘗試創建一個工作副本，以便其他人可以擺弄。 – Paul