CSS等于列

Question

实现两个div的高度相同有多难？

我希望此标题（图片和菜单）具有响应能力：http://test.kinoume.gr/ 我不想在标题中指定高度，而是将图像高度指定。

HTML

   <header class="row-fluid">
  <div id="headerimage" class="span3">
    <a href="#"><img src="http://test.kinoume.gr/img/kinoume-logo.png" alt="logo" /></a>
  </div>

  <div id="menu" class="span9">
    <nav>
        <ul>
            <li><a href="#" class="active">NEWS</a></li>
            <li><a href="#">NEWS</a></li>
        </ul>
    </nav>
    </div>
</header>

CSS

img {max-width: 100%;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding:0;margin:0;}

a:link, a:visited {color:#9e8f7a;text-decoration:none;}
a:hover {text-decoration:underline;}
html {margin: 0;padding: 0;height:100%;}
body {background: #fff;margin: 0;max-width:1600px;height:100%;position:relative;padding:0}

header {border-bottom:7px solid #9e8f7a;background-color:#fff;}
nav ul {overflow: hidden;list-style-type: none;margin:0;}
nav ul li {float:left;display:inline-block;position: relative;margin:0 3% 0 0;padding-top:8px;}
nav ul li.active {border-top:8px #40ccd6 solid;}
nav ul li a {position: absolute; top:45%;font-size:1.3rem;}
li.active a {top:41%;}

...和http://jsfiddle.net/gong_planet/kzngh/1/

Answer 1

您可以使用 Flexbox 。

<强> jsFiddle Example

在你的CSS中：

#container {
    width: 500px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex; /* This is where the magic happens */
}

默认情况下，Flexbox会将列拉伸到相同的高度。