-1

2 つの 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/

4

1 に答える 1

0

フレックスボックスを使用できます。

jsFiddle の例

あなたのCSSで：

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

フレックスボックスは、デフォルトで列を同じ高さになるように引き伸ばします。

于 2013-07-26T09:55:23.200 に答える