缩放窗口时，保持3个元素中的2个之间的距离相等（响应）

Question

在另外一个上面有2个img div，旁边还有div中的流畅标题徽标（.svg）。

HTML：

<header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"><div class="wrap"><div id="menu_container"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/Hamburger_optimized.svg" alt="menu"  class="menu-btn" /><div class="menu_spacer"></div><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/searchicon.png" alt="zoek"  class="search_icon" /></div>


<div class="title-area"><h1 class="site-title" itemprop="headline"><a href="http://95.85.63.245/"></a></h1></div><div class="vr_menu_logo"><a href="/"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/logo_VR_font.svg"></a></div>
</div></header>

CSS：

.vr_menu_logo{
  max-width:95%; 
  float:left;
  margin-right:20px;
  }

#menu_container {
  max-width: 5%;
  float: right;
  }

  .menu-btn{
 cursor: pointer;
 max-height: 30px;
 max-width: 30px;
 margin-top:2em;
}

.menu_spacer{height:4em;}

.search_icon{
  cursor: pointer;
  max-height: 24px;
  max-width: 24px;
  }


.site-header .wrap {
  width: 1260px;
  }
.site-header .wrap {
  margin: 0 auto;
  padding: 0;
  float: none;
  overflow: hidden;
}

目标： 缩放浏览器窗口会使小汉堡包和搜索图标分别与徽标的顶部和底部保持一致。实际上，3个单独的项目应该作为一个标志。

点击此处查看cssdesk：http://www.cssdesk.com/JDyYQ

我希望有一个具有最大高度的spacer div可以做到这一点，或者显示：table-cell; 但我无法让它发挥作用，任何人都有想法？ （javascript也可以是一个选项，但我认为这必须是可能的......）

Answer 1

这是一个使用flexbox的示例 - 请注意，除了拥有不同的div之外，两个height完全相同。这应该可以帮助您获得您想要实现的目标。显然，检查您需要提供哪种浏览器支持，因为flexbox是一种相对较新的技术。

http://jsfiddle.net/zn50mmnu/

HTML：

<div class="flexy f1">
    <span class="menu">M</span>
    <span class="search">S</span>
</div>
<div class="flexy f2">
    <span class="menu">M</span>
    <span class="search">S</span>
</div>

的CSS：

.flexy {
    float: right;
    clear: both;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid red;
    margin: 10px;
}

.f1 {
    height: 50px;
}

.f2 {
    height: 90px;
}

.menu {
    background: red;
    width: 1em;
}

.search {
    background: blue;
    width: 1em;
}