1

我一直在尝试使用 display: inline-block; 更频繁。我有两个 div 或图像或内联块级别的任何内容。我将它们垂直对齐在中间。但是，我想要一个左浮动，一个右浮动 - 这打破了咒语。例如：左侧标题中的徽标和右侧的移动导航符号。我还不如说绝对定位不是一种选择：

一个小提琴在这里： 谢谢。

HTML

<header class="global-header">
    <div class="logo">logo</div>    
    <div class="hamburger">☰&lt;/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;
}
4

3 回答 3

2

以下会给出预期的结果吗？

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

-15 来自汉堡宽度 + 标志宽度

于 2013-06-08T22:34:49.620 回答
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/

根据您真正放入徽标和汉堡包元素的内容，您可能需要为每个元素应用行高。

于 2013-06-08T23:51:47.323 回答
0

我想你想为移动页面做一个标题。您应该尝试将 box-model 与 box-orient 和 box-flex 一起使用。

可以在这里找到一个很好的指南（虽然它是德语）： http ://www.html5rocks.com/de/tutorials/flexbox/quick/

底部是某种 CSS-fiddle-box，所以你可以试试它是否适合你。

我能想到的唯一缺点是，您必须在两者之间填充另一个元素，.logo而..hamburgerbox-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;
}
于 2013-06-08T22:52:02.107 回答