HTML导航定位

Question

我有非常简单的导航。
header 内的三个 div ( Logo 、导航和电话)。
我想让它们在用户缩小时具有响应性和可拉伸(stretch)性。

示例
http://www.zendrive.com/

有人可以给我一个简单的 CSS 示例来说明如何实现这一点吗？

Answer 1

.header {
    display: table;
    position: relative;
    width:  100%;
    height: 60px;
}

.header > * {
    display: table-cell;
    position: relative;
    height: 100%;
}

.header .navigation ul {
    display: inline-block;
    position: relative;
    list-style: none;
    margin:  0;
    padding: 0;
}

.header .navigation li {
    display: inline-block;
}

<header class="header">
    <div class="logo">
        <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
    </div>
    <nav class="navigation">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </nav>
    <div class="phone">555.555.5555</div>
</header>