当我在文本上写长文本时，我的div与其容器重叠
我会尽力以最明智的方式表达问题。
在我的网站设计中，我得到了width:90%;的所有div（网站的所有部分），在div的两边都有5%边距，使得他们可以使用margin: 0 auto;。居中＆＃39 ;.我通过设置适当的宽度和'base.html'来实现这一点。
我正在使用Django的模板，所以对于我现在正在写的页面我延伸到header。这意味着我扩展了包含navigation和footer菜单的前两个div。页面底部还有20% width div，在它们之间，我现在添加的内容。
在这个中心内容div中，我希望它具有的结构类似于垂直，* {
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;
}浮动在左侧，有两个内容＆＃39; div就在它旁边，剩下所有空间。这是一个例子：
CODE：
<div id="content">
<div class="textoh">
<ul>
<li>INFO</li>
<li>ABOUT</li>
<li>LINKS</li>
<li>OTHERS</li>
</ul>
</div>
<div class="wrap">
<div class="textoup">
<h1>TITLE TITLE TITLE</h1>
<h3>DESCRIPTION DESCRIPTION</h3>
</div>
<div class="textodown">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>.textodown
但是，我遇到了一个很大的问题。在写一篇更长的“lorem”的同时。文本，.wrap div与#content一起离开.textodown div，与页脚重叠。
我希望将所有内容都包含在“内容”中。 div，如果.wrap或#content得到更大的高度，请使`kod_tecdoc` varchar(50) NOT NULL,
^^^^^^^^
div更大而不是超越它。
我不是说英语的人，所以我不知道问题是否清楚，我真的很感激帮助，如果不理解，我会很高兴发布一些图像或任何必要的图像。
2 个答案:
答案 0 :(得分：2)
从position:absolute删除.wrap（我修了一下你的margin，但我想你可以管理它了）
* {
margin: 0;
padding: 0;
}
#content {
width: 90%;
margin: 0 auto;
background-color: lightyellow;
height: 80%;
}
.textoh {
width: 20%;
height: 75%;
background-color: darkgrey;
margin: 5%;
display: inline-block;
vertical-align:top;
border-radius: 6px;
padding: 1em;
}
.textoup {
width: 60%;
height: 60%;
background-color: lightgreen;
margin: 5%;
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;
display: inline-block;
width: 60%;
margin: 10px;
border-radius: 6px;
}
.footer {
background: red
}<div id="content">
<div class="textoh">
<ul>
<li>INFO</li>
<li>ABOUT</li>
<li>LINKS</li>
<li>OTHERS</li>
</ul>
</div>
<div class="wrap">
<div class="textoup">
<h1>TITLE TITLE TITLE</h1>
<h3>DESCRIPTION DESCRIPTION</h3>
</div>
<div class="textodown cf">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="footer">this is a footer</div>
</div>
答案 1 :(得分：0)
尝试以下代码我删除了一些高度并调整了宽度。
#content {
width: 90%;
margin: 0 auto;
background-color: lightyellow;
}
.textoh {
width: 20%;
height: 75%;
background-color: darkgrey;
margin: 5%;
display: inline-block;
vertical-align:top;
border-radius: 6px;
padding: 1em;
}
.textoup {
width: 90%;
background-color: lightgreen;
margin: 5%;
border-radius: 6px;
display: inline-block;
}
.textodown {
width: 90%;
background-color: lightpink;
margin: 2% 5% 5% 5%;
display: inline-block;
border-radius: 6px;
}
.wrap {
background-color: lightblue;
display: inline-block;
width: 60%;
margin: 10px;
border-radius: 6px;
}
.footer {
background: red
}<div id="content">
<div class="textoh">
<ul>
<li>INFO</li>
<li>ABOUT</li>
<li>LINKS</li>
<li>OTHERS</li>
</ul>
</div>
<div class="wrap">
<div class="textoup">
<h1>TITLE TITLE TITLE</h1>
<h3>DESCRIPTION DESCRIPTION</h3>
</div>
<div class="textodown cf">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="footer">this is a footer</div>
</div>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？