CSS равные столбцы

-1

Насколько трудно достичь двух divs одинаковой высоты?CSS равные столбцы

Я хочу, чтобы этот заголовок (изображение & меню) будет реагировать: 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/

источник

2013-07-26 gong

У меня никогда не было подхода «я хочу», это напоминает мне слишком много клиентов, а не членов сообщества, нуждающихся в помощи. –

Я хочу, чтобы этот заголовок (изображение и меню) был отзывчивым? –

_ «Как трудно достичь двух divs одинаковой высоты?» _ - Как трудно делать собственные исследования по теме, которая была обсуждена в целом по всему миру, а затем по крайней мере пять лет? – CBroe

Вы можете использовать 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, по умолчанию, растянуть столбцы, чтобы быть одинаковой высоты.

источник

2013-07-26 09:55:23

CSS равные столбцы

ответ

Смежные вопросы