个人中心
gpt4 book ai didi

html - 使用 Flexbox 并且我想放置一个盒子

转载 作者：太空宇宙 更新时间：2023-11-04 13:15:36 25 4
gpt4 key购买 nike 

* {
    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/

25 4 0
文章推荐： javascript - 前置滚动问题
文章推荐： java - ArrayBag的grab()和remove()方法，使用.grab()方法后如何删除String？
文章推荐： java - 响应式(Reactive) Java : Insert item in stream based on comparison of two items
文章推荐： javascript - 用 CSS 和一点 JS 来设计输入类型文件的样式，这样可以吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com