将孩子的身高扩大到未申报身高的父母

Question

我有3块div，并排。左边是一个广告，中间的一个是未知的高度，它可以是100px高度或1000px，右边也是一个相对未知的高度。这3个div中的任何一个都可能是容器中最高的东西。

我希望左边的div延伸到容器div的底部。然后我可以将广告集中在内，但重要的是我要做的就是“离开”。延伸到其父母的底部。

http://jsfiddle.net/wuo4jvwu/

＆＃13;

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将overflow: hidden和position: relative添加到父级（.container）并将position: absolute添加到.left：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

转储浮动并将容器的显示更改为表格...并将子显示转换为表格单元格。然后根据您的需要在每个div上进行对齐。

＆＃13;

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;