我想使用 flex 在屏幕右侧制作一个侧边栏，它可以在 hr 下方滚动。我设置了列，但由于某种原因，侧边栏列出现在主要内容列的下方，而不是最右侧。这些类是 "sidebar-column-right"和 content-right 。我刚开始使用 flexbox，所以我可能做错了什么。
<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;
}
最佳答案
希望这就是您所期待的。我在你的 "sidebar-column-right" 和 content-right 类上方添加了一个带有 class = "flex-box" 的 div 并更改了一些CSS。请运行链接中的 plunker 代码。
关于html - 使用 Flexbox 制作侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47149655/