Развернуть высоту ребенка до родителя необъявленной высоты

У меня есть 3 блока divs, бок о бок. Левое - это объявление, среднее - неизвестной высоты, оно может быть 100px height или 1000px, а справа - также относительно неизвестная высота. Любой из этих 3-х дивизий может быть самым высоким в контейнере.Развернуть высоту ребенка до родителя необъявленной высоты

Я хотел бы, чтобы левый div растянулся до нижней части контейнера div. Затем я могу сосредоточить рекламу внутри, но важно, чтобы «left» простирался до нижней части родителя.

http://jsfiddle.net/wuo4jvwu/

.container{ 
 
    background:green; 
 
    display: inline-block; 
 
} 
 
.left{ 
 
    float:left; 
 
    margin-right:10px; 
 
    width:100px; 
 
    background:red; 
 
} 
 
.ad{ 
 
    height:200px; 
 
    width:100px; 
 
    background:pink; 
 
} 
 

 
.middle{ 
 
    float:left; 
 
    margin-right:10px; 
 
    width:200px; 
 
    background:red; 
 
} 
 
.right{ 
 
    float:left; 
 
    width:100px; 
 
} 
 

 
.right .news{ 
 
    background:red; 
 
    width:inherit; 
 
    height:200px; 
 
} 
 

 
.right .tweets{ 
 
    background:red; 
 
    margin-top:10px; 
 
    clear:both; 
 
    width:inherit; 
 
    height:100px; 
 
} 
 

 
.clear { clear: both; }

<div class="container"> 
 
    <div class="left"> 
 
     <div class="ad">AD</div> 
 
    </div> 
 
    <div class="middle"> 
 
     <ul> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
     </ul> 
 
    </div> 
 
    <div class="right"> 
 
     <div class="news">news</div> 
 
     <div class="tweets">tweets</div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

источник

2014-12-12 hedgehog90

Вы также можете поиграться с Arround прогибается: http://jsfiddle.net/wuo4jvwu/3/ –

ли прогибается действительно жизнеспособным еще для совместимости достойного браузера? – hedgehog90

Решите, что самостоятельно: http://caniuse.com/#feat=flexbox –

Вы можете добавить overflow: hidden и position: relative к родителю (.container) и добавить к position: absolute.left:

.container { 
 
    background: green; 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
} 
 
.ad { 
 
    height: 100%; 
 
    width: 100px; 
 
    background: pink; 
 
} 
 
.middle { 
 
    float: left; 
 
    margin-right: 10px; 
 
    width: 200px; 
 
    background: red; 
 
    margin-left: 110px; 
 
} 
 
.right { 
 
    float: left; 
 
    width: 100px; 
 
} 
 
.right .news { 
 
    background: red; 
 
    width: inherit; 
 
    height: 200px; 
 
} 
 
.right .tweets { 
 
    background: red; 
 
    margin-top: 10px; 
 
    clear: both; 
 
    width: inherit; 
 
    height: 100px; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <div class="ad">AD</div> 
 
    </div> 
 
    <div class="middle"> 
 
    <ul> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
     <li>ITEM</li> 
 
    </ul> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="news">news</div> 
 
    <div class="tweets">tweets</div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

источник

2014-12-12 18:25:07 user2019037

Дамп поплавков и изменение отображения контейнера в таблицу ... и отображения дочерних divs в ячейку таблицы. Затем играйте с выравниванием на каждом div, как вы сочтете нужным.

.container{ 
 
    background:green; 
 
    display: table; 
 
} 
 

 
.left{ 
 
    margin-right:10px; 
 
    width:100px; 
 
    background:red; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    
 
} 
 
.middle{ 
 
    margin-right:10px; 
 
    width:200px; 
 
    background:red; 
 
    display:table-cell; 
 
} 
 
.right{ 
 
    width:100px; 
 
    display:table-cell; 
 
     vertical-align:top; 
 
} 
 

 
.right .news{ 
 

 
    background:red; 
 
    width:inherit; 
 
    height:200px; 
 
} 
 

 
.right .tweets{ 
 
    background:red; 
 
    margin-top:10px; 
 
    clear:both; 
 
    width:inherit; 
 
    height:100px; 
 
} 
 

 

 
.ad{ 
 
    height:200px; 
 
    width:100px; 
 
    background:pink; 
 
} 
 

 

 
.clear { clear: both; }

<div class="container"> 
 
    <div class="left"> 
 
     <div class="ad">AD</div> 
 
    </div> 
 
    <div class="middle"> 
 
     <ul> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
      <li>ITEM</li> 
 
     </ul> 
 
    </div> 
 
    <div class="right"> 
 
     <div class="news">news</div> 
 
     <div class="tweets">tweets</div> 
 
    </div> 
 
    
 
    
 
    <div class="clear"></div> 
 
</div>

источник

2014-12-12 18:29:09

Развернуть высоту ребенка до родителя необъявленной высоты

ответ

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