0
您好，我有一个只有两张图片但没有那么多文本的div，但尽管如此，文本却溢出了它的容器，这是一个问题。我的目标是有两个独立的容器，底部的列表。有没有一种顺利的方式可以完成这件事？我只需要摆脱溢出并能够将列表保存在单独的容器中。该列表可以在同一个容器中，但我并不太确定该结构甚至看起来像什么，因为它必须是具有一个顶行（顶行将会有+右侧部分）和底行（这将是垂直列表）。而且这个问题只在手机上发现，据我所知，在这个片段中，你会发现它比这里看起来更糟糕。但我不太确定该做什么;容器已经100％宽度和100％高度。最后，列表仍然出现在第一个容器之后。100％高度和100％宽度的文本溢出
* {
margin: 0;
}
body {
background-color: green;
}
html,
body {
height: 100%;
}
.left {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
order: 1;
width: 45%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
width: 45%;
height: 100%;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
#bigwrap {
height: 100%;
}
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: space-around;
align-items: stretch;
height: 100vh;
width: 80%;
margin: 5% auto 8% auto;
background-color: white;
}
.middle p:first-child {
margin-top: 8%;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
li {
list-style-type: none;
font-size: 18px;
}
.lihead {
font-size: 24px;
margin-bottom: 1%;
}
.stuff {
background-color: white;
margin: auto;
width: 70%;
}
.stuff ul li {
margin-bottom: 2%;
}
.center {
text-align: center;
}
.center1 {
text-align: center;
color: green;
font-size: 28px;
}
.tpoint {
font-size: 24px;
color: orange;
}
.mtop {
margin-top: 2%;
}
a {
text-decoration: none;
color: orange;
}
.foot {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.foot div {
margin-right: 1%;
}
.container .box {
border: 2px solid red;
}
@media all and (max-width: 900px) {
#nav {
flex-direction: column;
/*updated*/
margin-bottom: 7%;
}
#nav ul {
padding-left: 0;
/*added*/
}
#nav li {
flex: 1 1 100%;
/*updated*/
padding: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav li a {
text-align: center;
padding: 5px;
margin: 5px;
}
#bigwrap {
width: 100%;
}
.container {
flex-flow: row wrap;
min-height: 100vh;
width: 100%;
}
.left,
.right {
flex: 1 100%;
}
.middle {
flex-flow: row wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
.box {
width: 70%;
text-align: center;
}
#header2 {
justify-content: space-around;
}
}
@media (min-width: 900px) and (max-width: 1100px) {
#nav {
justify-content: space-around;
}
.container {
width: 100%;
}
}<div id="bigwrap">
<div class="container">
<div class="left">
<img src="eggs.jpg" width="209" height="205" alt="Picture of kid" />
<img src="benedict.jpg" width="209" height="205" alt="Picture of kid">
</div>
<div class="middle">
<div class="box">
<h2> Sample list </h2>
</div>
<div class="box">
<p>
Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.
Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample
sentence. Sample sentence. Sample sentence. Sample sentence.
</p>
</div>
<div class="box">
<p>
Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.
Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample
sentence. Sample sentence. Sample sentence. Sample sentence.
</p>
</div>
</div>
</div>
<div class="stuff">
<p class="center1">Sample sample</p>
<p class="center tpoint">Sample Food</p>
<ul>
<li>Sample Mr.Sample
<ul>
<li>Samples</li>
<li>Sammple</li>
</ul>
</li>
<li>Sample
<ul>
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Sampl;e</li>
<li>Sample</li>
</ul>
</li>
<li>Sam
<ul>
<li>Sample</li>
<li>List</li>
</ul>
</li>
<li>Lists
<ul>
<li>Lists</li>
<li>Lists</li>
</ul>
</li>
</ul>
<p class="center tpoint">List</p>
<ul>
<li>List
<ul>
<li>List</li>
</ul>
</li>
<li>Sample</li>
<li>List</li>
<li>Ss</li>
<li>Samples</li>
<li>List</li>
<li>This is a sample</li>
<li>This is a sample</li>
</ul>
<p class="center tpoint">Sam</p>
<ul>
<li>Sample
<ul>
<li>Samples</li>
</ul>
</li>
<li>More samples
<ul>
<li>This is a sample</li>
</ul>
</li>
</ul>
</div>
Shinji-san，你可能没有得到太多的帮助，因为html格式不正确。要回答你的问题，我将不得不以可读的方式格式化HTML。如果清理HTML并取出所有不必要的空白区域，您的运气可能会更好。一个好的格式化问题会得到快速的回应。 – orangeh0g
谢谢orangeh0g。你有链接关于如何格式正确包括CSS。我不断收到编辑，但这个网站没有评论系统，所以它很难。 - 谢谢你 –
哦，我想我可以模仿编辑.. –