* {
margin: 10px auto;
}
body {
background-color: #C0C0C0;
font-size: 100%;
margin: 10px 10px
}
#main {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
text-align:center ;
width: 50 %;
}
#top_header {
-webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
-ms-flex-order: 1; /* TWEENER - IE 10 */
-webkit-order: 1; /* NEW - Chrome */
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
border: 2px solid red;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background:gray;
padding: 20px;
margin:0px;
width:100%;
font: bold 1.5em Gothic;
}
#top_menu {
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+*/
content-align:center;
width: 100%;
text-align: left;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 10px;
border: black;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background: #9595FD;
content: center;
}
#top_menu li {
display:inline-block; /* inline means it displays left to right */
text-align: left;
list-style: none;
padding-left: 25px;
padding-right: 25px;
border: 2px solid black;
font: bold 1em tahoma;
content: center;
background: #C0C0C0;
}
#main_section {
-webkit-box-ordinal-group: 4; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 4; /* OLD - Firefox 19- */
-ms-flex-order: 4; /* TWEENER - IE 10 */
-webkit-order: 4; /* NEW - Chrome */
order: 4; /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex: 1;
border: 2px solid black;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background:gray;
width:20%;
height: 100% ;
}
#recent_news {
-webkit-box-ordinal-group: 5; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 5; /* OLD - Firefox 19- */
-ms-flex-order: 5; /* TWEENER - IE 10 */
-webkit-order: 5; /* NEW - Chrome */
order: 5;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
border: 2px solid black;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background:white;
width: 10%;
height: 100%;
margin:10px;
}
#other_stuff {
-webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
-ms-flex-order: 3; /* TWEENER - IE 10 */
-webkit-order: 3; /* NEW - Chrome */
order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */
border: 2px solid black;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background:white;
width: 10% ;
height: 100% ;
margin: 10px;
}
#footer {
-webkit-box-ordinal-group: 6;
-webkit-box-ordinal-group: 6; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 6; /* OLD - Firefox 19- */
-ms-flex-order: 6; /* TWEENER - IE 10 */
-webkit-order: 6; /* NEW - Chrome */
order: 6; /* NEW, Spec - Opera 12.1, Firefox 20+ */
border-top: 2px solid black;
background: white;
padding: 5px;
margin:10px;
text-align:center;
width: 100% ;
} <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="Resources Page.css" />
</head>
<body>
<div id="main">
<header id="top_header">
</header>
<nav id="top_menu">
</nav>
<section id="main_section">
<article class="article">
<footer>
<p></p>
</footer>
</article>
</section>
<aside id="recent_news">
</aside>
<aside id="other_stuff">
</aside>
<footer id="footer">
<p></p>
</footer>
</div>
</body>
</html>假设我想让 #other_stuff 变得固定，这样如果 main_section 是一长串东西，并且最近的新闻框是一个快速搜索栏，它会与您一起向下滚动，这样您就不必一直滚动回到顶部即可快速导航到某处(因为这会破坏快速导航栏的目的)。
我可以添加一些东西让它留在主要部分的左边吗？我不知道固定位置是否是我正在寻找的。
最佳答案
我觉得您要求的是在滚动时让 div 或元素在到达屏幕顶部后停止。在您的设计中使用 flex 时，我不会说这是不可能的，但是您使用 postion: fixed; 会很困难，因为其他元素想要移动和移动以填充空间。此外，您肯定需要使用某种 JavaScript 以及您拥有的东西，以便它可以先滚动然后停留。我整理了一个 jsFiddle that shows how to do the sticky div part .
关于html - 使用 Flexbox 并且我想放置一个盒子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27209864/