Question

* {
    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是一长串的事情并且最近的新闻框是一个快速搜索栏，那么它会向下滚动到你身边你不必一直滚动到顶部以快速导航到某些东西（因为那样会破坏快速导航栏的目的）。

我可以添加一些内容使其保持在主要部分的左侧吗？我不知道固定的位置是否是我想要的。

Answer 1

我觉得你要求的是在你滚动时到达屏幕顶部时使div或元素停止。在您的设计中使用flex时，我不会说这是不可能的，但是使用postion: fixed;会很困难，因为其他元素想要移动并移动以填充空间。此外，您肯定需要使用某种JavaScript以及您拥有的内容，以便它可以先滚动然后再粘贴。我已整理了jsFiddle that shows how to do the sticky div part。

使用Flexbox，我想制作一个盒子

1 个答案: