0
フレックスを使用して、画面の右側にhrの下にスクロール可能なサイドバーを作成したいと思います。私は列が設定されていますが、何らかの理由でサイドバーの列が右端の代わりにメインコンテンツ列の下に表示されます。クラスは「サイドバー列右」とコンテンツ右です。私はフレックスボックスを使用することに新しいので、おそらく何か間違っている。フレックスボックスを使ってサイドバーを作成する
<html>
<head>
<title>Militia</title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="main-content.css">
</head>
<body>
<div id="container";>
<header>
<ul class="left";>
<li class="nav";><a class="a a-nav-top leftbuttons"; href="#">Home</a></li>
<li class="nav";><a class="a a-nav-top leftbuttons"; href="#">Shop</a></li>
<li class="nav";><a class="logobutton"; href="https://www.youtube.com/channel/UCmZOe6sv3wuq97Vo-9Rdyyw"; target="_blank";>RG</a></li>
<li class="nav";><a class="a a-nav-top rightbuttons"; href="#">Archives</a></li>
<li class="nav";><a class="a a-nav-top rightbuttons"; href="#">Suggestions</a></li>
</ul>
</header>
<div class="home";>
<h1>Home</h1>
<p>Hello welcome to my site you guys know me already Recht A.K.A Domo. Here you can find my video upload schedule, previous video, current video, and you can make suggestions on what games I play.</p>
<hr>
<div class="main-content-column-left";>
<div class="content-left";>
<h2>Previous Video (As of Jun-29-16):</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/bDXMLKNPUGw" frameborder="0" allowfullscreen></iframe>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, sale labore in mea. Eirmod deleniti probatus ne quo, nec cu graeci appellantur, latine denique usu ea. Pri nonumes quaerendum cu. Tollit possim accommodare ei vel, ne augue ludus constituto sea. Mel summo scripta omittantur ad, cum ei zril quaeque definiebas.</p>
</div>
<div class="content-left">
<h3>Upload Schedule:</h3>
<ol>
<li id="schedule";>Mondays: Upload</li>
<li id="schedule";>Tuesday: Upload</li>
<li id="schedule";>Wendsday: Upload</li>
<li id="schedule";>Thurday: Break</li>
<li id="schedule";>Friday: Upload</li>
<li id="schedule";>Saturday: Production</li>
<li id="schedule";>Sunday: Production</li>
</ol>
</div>
</div>
<div class="sidebar-column-right">
<div class="content-right";>
<h2>Im a side bar</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>
</div>
</div>
#container { /* added */
width: 100%; /* adjust to your needs */
max-width: 100%; /* responsive */
margin: 0 ; /* horizontal centering */
border: solid #DC143C;
color: #DC143C;
}
.home{
color: #DC143C;
}
.main-content-column-left{
color: #DC143C;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.sidebar-column-right{
border-left: solid 1px;
display: flex;
color: #DC143C;
border: solid 1px red;
width: 33.3%;
overflow-y: auto;
}
.content-left > iframe { /* added */
width: 560px;
height: 315px;
max-width: 100%;
max-height: 100%;
color: #DC143C;
}
.content-left{
color: #DC143C;
width: 33%;
}
.content-right{
}
h1{
color: #DC143C;
text-align: center;
}
h2.previousvid
{
text-align: left;
font-size: 20px;
}
h3.sidecontent{
text-align: right;
}
hr{
border: 1px solid #DC143C;
}
ol {
list-style-type: decimal;
}
ええ、これは私が欲しいものですが、どのように私は、サイドバーは、独自のスクロールを持って作るのでしょうか？ – Recht88
@ Recht88プランカコードが更新されました。それがあなたが期待しているものかどうかを確認します。 –
ええ、それは私が欲しいけど、サイドバーのスクロールは、画面が一定の大きさで満杯でないときにのみポップアップします。 – Recht88