需要将左浮动div固定在具有自动高度的底部div.这是小提琴

Question

http://jsfiddle.net/RJXez/259/

<div id="parent">
    <div class="left">
    </div>
    <div class="right">
        <p>
            content 1 here is auto height.
        </p>
    </div>
</div>
<div id="parent">
    <div class="left">
    </div>
    <div class="right">
        <p>
            content 2 here is auto height.
        </p>
    </div>
</div>
<div id="parent">
    <div class="left">
    </div>
    <div class="right">
        <p>
            content 3 here is auto height.
        </p>
    </div>
</div>

需要让红色的div和右边的div一起伸展，同时页边空白在顶部。不是固定的浏览器底部，而是父分区的底部。

Answer 1

这听起来像是一个伪列。网上有很多解决方案。有一种方法，你可以把右边包在左边。你在找这样的东西吗？

Fiddle：http://jsfiddle.net/s_Oaten/9B9yj/

<div id="parent">
    <div class="left">
        <div class="right">
            <p>
                content 1 here is auto height.
            </p>
        </div>
    </div>
</div>
<div id="parent">
    <div class="left">
        <div class="right">
            <p>
                content 2 here is auto height.
            </p>
        </div>
    </div>
</div>
<div id="parent">
    <div class="left">
        <div class="right">
            <p>
                content 3 here is auto height.
            </p>
        </div>
    </div>
</div>

Answer 2

1. 使#父位置：相对
2. Make.左位置：绝对，顶部：20px，底部：0px，高度：自动
3. 制作右侧边距左侧：30%(与左侧宽度相匹配(

http://jsfiddle.net/RJXez/260/

#parent {
 width:100%;
    height:auto;
    background-color:#eee;
    display:inline-block;
    position: relative;
}
.left {
    top:20px;
    width:30%;
    height:auto;
    bottom: 0px;
    background-color:red;
    position: absolute;
    display:block;   
}
.right {
  width:50%;
  margin-left: 30%;
  min-height:200px;
  background-color:blue;
  display:block;
  float:left;
}