javascript - 缩放窗口时保持 3 个元素中的 2 个元素之间的距离相等(响应式)

Question

有 2 个 img div's 在彼此之上，旁边还有一个 div 中的流体标题 Logo (.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;
}

目标:缩放浏览器窗口将使小汉堡包和搜索图标分别与 Logo 的顶部和底部保持水平。实际上，这 3 个独立的元素应该充当一个 Logo 。

在此处查看 cssdesk:http://www.cssdesk.com/JDyYQ

我希望具有最大高度的间隔 div 可以解决问题，或者显示:表格单元格；但是我无法让它工作，有人有想法吗？ (javascript 也可以是一个选项，但我认为这必须使用 CSS 才能实现...)

Answer 1

这里是一个使用 flexbox 的例子——注意在 fiddle 中，两个 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;
}