0
こんにちは私は単なる2枚の写真があり、それほど多くのテキストは好きではありませんが、これにもかかわらずテキストはコンテナから溢れていて問題です。私の目標は、2つの別々の容器を持つことです。私はこれを達成することができる滑らかな方法はありますか？私はオーバーフローを取り除き、リストを別のコンテナに保管できるようにする必要があります。リストは同じコンテナ内にあることができますが、その構造が一見上のように見えるようにもなりません。一番上の行（一番上の行は左+右のセクション）と一番下の行これは垂直リストになります）。また、これは私が知る限りモバイルでしか見つけられない問題であり、スニペットでは、それがここのように見えるよりもさらに悪いことがわかります。しかし、私は何をすべきかあまりにも分かりません。コンテナの幅は100％、高さは100％です。最後に、リストは最初のコンテナの後に表示されなければなりません。100％の高さと100％幅のdivからテキストがあふれている
* {
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を含めて正しくフォーマットする方法についてのリンクがありますか？私は編集を続けていますが、このサイトはコメントシステムを持っていないので、ちょっと難しいです。 - ありがとうございました –
ああ、私は編集を模倣できると思います。 –