Question

我一直在尝试使用display：inline-block;更经常的。我有两个div或图像或内联块级别的任何东西。我在中间垂直对齐它们。但是，我想留下一个浮子，右边一个浮子 - 打破了这个咒语。例如：左侧标题中的徽标和右侧的移动导航符号。我不妨只说绝对定位不是一个选择：

A FIDDLE is here:谢谢。

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的{{1}}和.hamburger之间的元素。

带领你：

box-flex: 1

以下（附加）css

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

垂直对齐相对div内的两个div但向右浮动一个div

3 个答案: