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