垂直對齊相對div內的兩個div但向右浮動一個div

Question

我一直在嘗試使用display：inline-block; 更經常的。 我有兩個div或圖像或內聯塊級別的任何東西。 我在中間垂直對齊它們。 但是，我想留下一個浮子，右邊一個浮子 - 打破了這個咒語。 例如：左側標題中的徽標和右側的移動導航符號。 我不妨只說絕對定位不是一個選擇：

一個FIDDLE在這里：謝謝。

HTML

<header class="global-header">
    <div class="logo">logo</div>    
    <div class="hamburger">☰</div>
</header>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {
    margin: 0;
}
.global-header {
    position: relative;
    width: 100%;
    float: left;
    padding: 1em;
    background-color: rgba(0,0,0,.2);
}

.logo, .hamburger {
    display: inline-block;
    vertical-align: middle;
    background-color: #f06;
    padding: 1em;
}

.logo {
    width: 12em; height: 5em;
}

.hamburger {
    width: 3em; height: 3em;
}

Answer 1

以下是否會產生預期的結果？

.hamburger { width: 3em; height: 3em; position:relative; left:100%; margin-left:-15em; }

-15來自漢堡包寬度+標志寬度

Answer 2

解決這個問題的一種方法是使用text-align：justify。 為了使其工作，內容需要多於一行，所以我們必須使用：after偽元素添加第二行內容。 然后就是停止第二條線占據任何垂直空間。

將此添加到您的CSS：

.global-header {
    text-align:justify;
    line-height:0;
}

.global-header:after {
    content: '\A0';
    display: inline-block;
    width:100%;
    line-height:0;
}

見http://jsfiddle.net/RZsyx/

根據您真正放入徽標和漢堡元素的內容，您可能需要為每個元素應用行高。

Answer 3

我想你想為移動頁面做一個標題。 你應該嘗試使用盒式和盒式彎曲的盒子模型。

這里可以找到一個很好的指南（雖然它是德語）： http ： //www.html5rocks.com/de/tutorials/flexbox/quick/

在底部是某種CSS-fiddle-box，所以你可以試試它是否適合你。

我能想到的唯一缺點就是你已經填寫了.logo和.hamburger之間的另一個元素，它獲得了box-flex: 1 。

領導你：

<header>
   <div class="logo boxes">logostuff</div>
   <div class="fill boxes"></div>
   <div class="hamburger boxes">E</div>
</header>

以下（附加）css

.boxes {
   display:-moz-box;
   background:#ff0000;
}
.global-header {
   float: none;
   display:-moz-box;
   -moz-box-orient:  horizontal;
   -moz-box-align: center;
}
.fill {
   -moz-box-flex:1;
}