Question

我在我的个人网站上工作。父标题放在flexbox中：

HTML：

<header class="main">
  <div class="content">
    <div class="logo">
      <a href="#"><img src="image.png" alt="" /></a>
    </div>
    <div class="navigation">
      <nav class="main-nav">
        <ul>
          <li><a href="#">Menu 1</a>
            <ul>
              <li><a href="#">Sub-Menu 1</a></li>
              <li><a href="#">Sub-Menu 2</a></li>
            </ul>
          </li>
          <li><a href="#">Menu 2</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

CSS：

header { display: -webkit-flex; display: flex; justify-content: center; overflow: auto;
         height: 20vh; width: 100%; align-items: flex-end; z-index: 999; }

header .content { width: 50vw; height: auto; position: relative;
                  display: -webkit-inline-flex; display: inline-flex;
                  justify-content: space-between; overflow: auto; align-items: flex-end; }

这会将徽标和导航放置在父项的底部，位于header .content div中这些元素的左侧和右侧。

但是我的下拉菜单项与容器重叠，导致标题中出现垂直滚动条。

我不想在导航和徽标上使用position: absolute;而不是flexbox，因为这样他们可以在水平方向上相互重叠。为小宽度屏幕编写导航隐藏器可以解决这个问题，但我认为flexbox是一个更好的解决方案。

如需完整的下拉菜单css，请访问JSfiddle：https://jsfiddle.net/Lanti/s4Lqqyyp/15/

有没有办法将flexbox用作父级并且隐藏下拉菜单项？

.main-nav ul ul { visibility: hidden; opacity: 0; position: absolute; }

感谢您的帮助！

更新

https://jsfiddle.net/Lanti/s4Lqqyyp/18/

从.container { display: -webkit-flex; display: flex; flex-direction: column; }添加position: relative;并删除header .content似乎解决了这个问题。

Answer 1

由于您使用的是flexbox，请删除flex divs的宽度/高度值（例如height: 20vh），然后使用flex property。示例：flex: 0 0 auto。另一个常见的flex属性是用于在容器内设置div方向（列或行）的flex direction。有时候flex wrap也是必要的。看看这3个属性，我们确定你将摆脱这些不受欢迎的卷轴。

三个对齐重要的弹性属性：Align items到垂直对齐。 Justify content水平对齐。 Align content表示容器内多行的项目。

＆＃13;

html, body {
  height: 100vh;  
  margin: 0;
}

#container { 
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column; /* Safari 6.1+ */
  flex-direction: column;
  height: 100%;
}

#A {
  -webkit-flex: 0 0 20%;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  height: 20%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row; /* Safari 6.1+ */
  flex-direction: row;
  -webkit-align-items: flex-end; /* Safari 7.0+ */
  align-items: flex-end;
  -webkit-justify-content: center;
  justify-content: center;
}

#B {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 0 60%;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  height: 60%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-flex-wrap: nowrap; /* Safari 6.1+ */
  flex-wrap: nowrap;
  -webkit-flex-direction: row; /* Safari 6.1+ */
  flex-direction: row;
}

#C {
  -webkit-flex: 0 0 20%;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row; /* Safari 6.1+ */
  flex-direction: row;
  -webkit-align-items: flex-start; /* Safari 7.0+ */
  align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
}

#header {
 -webkit-flex: 0 0 80%;
 -ms-flex: 0 0 80%;
 flex: 0 0 80%;
 text-align: center;
 height: 80%;
}

#footer {
 -webkit-flex: 0 0 80%;
 -ms-flex: 0 0 80%;
 flex: 0 0 80%;
 text-align: center;
}

#B img {  
  height: 100%; 
}

#logo {
  height: calc(100% - 10px);
  max-height: 100%;
  margin-top: 5px;
  margin-bottom: 5px;  
}

span {
  font-family: arial, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
}

#header span {  
  vertical-align: super;
}

＆＃13;

<div id="container">
<div id=A style="background-color:hotpink;">
<div id=header style="background-color:honeydew;"><span>MENU 1 - MENU 2</span><img src="http://lantosistvan.com/wp-content/uploads/2014/02/lantosistvan-logo-100px-003.png" alt="Lantos István Photography" id=logo /><span>MENU 3 - MENU 4</span></div>
</div>
  
<div id=B style="background-color:honeydew;">  
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0001-1400px.jpg" alt="">    
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0002-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0003-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0004-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0006-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0007-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0008-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0009-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0011-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0012-1400px.jpg" alt="">
</div>
  
<div id=C style="background-color:hotpink;">
<div id=footer style="background-color:honeydew;"><span>FOOTER</span></div>  
</div>
</div>

＆＃13;

下拉菜单将其容器重叠在flexbox内

1 个答案: