CSS浮动左边：边距最小的[完美契合]

Question

我有几个评论框，我正在努力使它们完美契合。

样品：

HTML

<div class="wrapper">
    <div class="minor">a</div>
    <div class="major">a</div>
    <div class="minor" style="margin-top: -50px;">a</div>
</div>

CSS

div {
    float: left;
    border: 1px #000 solid;
}

.wrapper {
    display: table;
    width: 120px;
    border-style: dotted;
}

.minor {
    width: 50px;
    height: 50px;
}

.major {
    width: 50px;
    height: 100px;
    margin-left: 4px;
}

JSFIDDLE

如何离开它们只改变CSS？

Answer 1

这样的事情：http://jsfiddle.net/3JQyb/6/

<强> HTML

<div class="table">
    <div class="row">
        <div class="major">
            <p class="wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia ultricies sem, at sollicitudin ligula ultrices nec. In venenatis, libero ac consequat ullamcorper, nunc augue.</p>
        </div>
        <div class="major">
            <p class="wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia ultricies sem, at sollicitudin ligula ultrices nec. In venenatis, libero ac consequat ullamcorper, nunc augue.</p>
        </div>
    </div>
    <div class="row right">
        <div class="minor">
            <p class="wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia ultricies sem, at sollicitudin ligula ultrices nec. In venenatis, libero ac consequat ullamcorper, nunc augue.</p>
        </div>
    </div>
</div>

<强> CSS

.wrap {
    padding: 10px;
}
.table {
    display: table;
    height: 100%;
    border: 1px solid black;
}
.row {
    display: table-cell;
        vertical-align: top;
    height: 100%;
}
.row.right {
    display: block;
}
.major, .minor {
    border: 1px solid black;
}
.major {
    height: 50%;
}
.minor {
    min-height: 100%;
}

修改 修复了代码中的错误，如果左侧框的高度较大，右侧框不会伸展全高。