html - 页面缩放时如何避免logo div和menu div重叠？

Question

我在 header-bottom 类 div 中有两个名为 .logo 和 .menu 类的 div 类。

<header class="header-bottom">
<div class="logo">
<a href="#"><img src="images/logo.png" alt="REVELATION" /></a>
</div>
<nav class="menu">
    <ul>
        <li class="current"><a href="#">homepage</a></li>
        <li><a href="#">site demo</a></li>
        <li><a href="#">full width</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">dropdown</a></li>
    </ul>
</nav>

现在的问题是，当我更改浏览器窗口或缩放时，.logo 和 .menu 类的内容相互重叠。如果我在 Logo 中设置宽度，那么问题就解决了，但我想要另一种简单的方法来打洞整个 .logo 类 div，即使没有内容。 box-sizing, positioning 可以解决问题，但如何解决？我不知道。

*{
    margin:0 ;
    padding:0;
}

/* hedaer bottom*/
.header-bottom 
{
    padding-top:40px;
    overflow:hidden;
}
.header-bottom .logo
{
    width:15%;
    float:left;
    display: inline-block;
}

.header-bottom .menu
{
    width:85%;
    float:left;     
}
.header-bottom .menu ul
{
    list-style:none;
    float:right;
    margin-top:15px;
    padding-right:12px;
}
.header-bottom .menu ul li
{
    float:left; 
    padding-bottom:10px;
    padding-right:10px;
    border-bottom:1px solid #ededed;
}
.header-bottom .menu ul li:last-child
{
    padding-right:0px;
}

.header-bottom .menu ul li a
{
    text-decoration:none;
    font-family:Georgia Regular;
    font-size:13px;
    font-weight:normal;
    color:#55415f;
    text-transform:uppercase;
    /* border-bottom:2px solid transparent;*/
}
.header-bottom .menu ul li a:hover
{
    padding-bottom:10px;
    border-bottom:2px solid #55415f;
}
.header-bottom .menu .current a
{
    border-bottom:2px solid #55415f;
    padding-bottom:10px;
}

Answer 1

这里是使用 Flexbox 的开始。

在.header-bottom 上设置display: flex 将使.logo 和.menu保持并排，如表格单元格，.menu 上的flex-grow: 1 设置使。 menu 取左边没有被.logo

占用的空间

最后，通过在 .header-bottom 上设置 align-items: center，您不需要顶部/底部填充来使 .logo 居中 和 .menu，align-items 为您完成，类似于 vertical-align: middle 对 内联元素。

* {
  margin: 0;
  padding: 0;
}


/* hedaer bottom*/

.header-bottom {
  padding-top: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.header-bottom .logo {
  padding-right:10px;
}

.header-bottom .menu {
  flex-grow: 1;
}

.header-bottom .menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
}

.header-bottom .menu ul li {
  border-bottom: 1px solid #ededed;
  padding-right:10px;
}

.header-bottom .menu ul li:last-child {
}

.header-bottom .menu ul li a {
  text-decoration: none;
  font-family: Georgia Regular;
  font-size: 13px;
  font-weight: normal;
  color: #55415f;
  text-transform: uppercase;
  /* border-bottom:2px solid transparent;*/
}

.header-bottom .menu ul li a:hover {
  border-bottom: 2px solid #55415f;
}

.header-bottom .menu .current a {
  border-bottom: 2px solid #55415f;
}

<header class="header-bottom">
  <div class="logo">
    <a href="#"><img src="images/logo.png" alt="REVELATION" /></a>
  </div>
  <nav class="menu">
    <ul>
      <li class="current"><a href="#">homepage</a></li>
      <li><a href="#">site demo</a></li>
      <li><a href="#">full width</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">gallery</a></li>
      <li><a href="#">dropdown</a></li>
    </ul>
  </nav>