1

一天多来，我一直在寻找一种垂直对齐流畅设计的标题的方法，因此在不知道字体大小或特定像素的情况下，我的 3 个 div 将具有相同的高度，并且它们内部的内容在同一行中。

这是我现在拥有的一个小提琴示例，因此您可能会更好地理解我需要什么。

这是代码：

HTML：

<div id="container">
<div id="header">
    <div id="menu">     
        <a href="#">
            <img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
        </a>
    </div>
    <div id="title">
        My site title
    </div>
    <div id="my_button">
        <button id="button">My button</button>
    </div>
    <div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>

CSS：

html,body {
height: 100%;
font-size: 2vmin;
}

#container {
height: 100%;
min-height: 100%;
}

#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}

#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}

#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}

div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}

#content {
height: 70%;
width: 100%;
background: #eeeeee;
}
4

4 回答 4

1

您可以使用 :after 伪元素来解决您的问题。

在 CSS 中的 #header 样式之后添加它

#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}

然后从#menu、#title 和#my_buttun div 中删除浮动并应用

display: inline-block; 
vertical-align: middle;

inline-block 会在这些 div 之间产生小间隙，但如果你没有对它们应用背景颜色，那就没问题了。

最后：使#my_button 宽度：19%；

看这里：http: //jsfiddle.net/D22Ln/5/

于 2013-11-15T12:04:25.643 回答
0

如果我对您的理解正确，这可能就是您正在寻找的，我只是复制了我之前所做的。但测试一下：http: //jsfiddle.net/6aE72/1/

通过使用 wrapper 和 helper，您将拥有与 middle 相同的左右 div 大小，并且 helper 有助于垂直对齐

#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }
于 2013-11-15T11:13:50.400 回答
0

这个FIDDLE可能会帮助你。我用过bootstrap框架。重新调整RESULT网格的大小。

于 2013-11-15T11:33:24.103 回答
0

如果您指的是三个水平 div，那么设置height: 100%;所有这些 div 就可以了。从那里您只需修改其父元素的大小（当前为 20%），它们将自动适应。

http://jsfiddle.net/D22Ln/2/

于 2013-11-15T10:48:34.000 回答