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。我不斷收到編輯，但這個網站沒有評論系統，所以它很難。 - 謝謝你 –
哦，我想我可以模仿編輯.. –