html – 使flex项目像显示块一样[复制]

概述参见英文答案 > Force flex item to span full row width                                    2个 所以我有一个容器,它使用display flex,然后是4个div,其中第一个需要像使用显示块一样,其他3个需要按原样使用. 代码段演示： #container { display: flex;}#menu { d 参见英文答案 > Force flex item to span full row width                                    2个
所以我有一个容器,它使用display flex,然后是4个div,其中第一个需要像使用显示块一样,其他3个需要按原样使用.

代码段演示：

#container {  display: flex;}#menu {  display: flex;}#menu p {  margin: 0;  padding: 8px;  padding-bottom: 0;}.otherdivs {  height: 700px;  wIDth: 10%;  background-color: grey;  margin-right: 5px;}

<div ID="container">  <div ID="menu">    <p>Btn</p>    <p>Btn</p>    <p>Btn</p>  </div>  <div ></div>  <div ></div>  <div ></div></div>

如何让菜单显示在其他div之上？

我知道我可以把菜单div放在容器之外,但我需要将它保存在容器中,因为我在Jquery选项卡中使用它.

解决方法 你应该添加一个flex-basis：100％到#menu,并通过应用flex-wrap：wrap;允许灰色项目转到新行.到#container：

#container {  display: flex;  flex-wrap: wrap;}#menu {  display: flex;  flex-basis: 100%;}#menu p {  margin: 0;  padding: 8px;  padding-bottom: 0;}.otherdivs {  height: 700px;  wIDth: 10%;  background-color: grey;  margin-right: 5px;}

<div ID="container">  <div ID="menu">    <p>Btn</p>    <p>Btn</p>    <p>Btn</p>  </div>  <div ></div>  <div ></div>  <div ></div></div>

总结

以上是内存溢出为你收集整理的html – 使flex项目像显示块一样[复制]全部内容，希望文章能够帮你解决html – 使flex项目像显示块一样[复制]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。