2并排DIV（1线）向右伸展

Question

我正在尝试在CSS中构建如下所示的液体布局。

左列应该伸展到所有可用空间，如果可能，则拉伸到同一行。右边的列应该具有相同的宽度。

我已经取得了非常接近我想要的结果。看看http://jsfiddle.net/tcWCC/34/embedded/result/ 但是有两个问题。两个对齐的DIV的高度应该相等。第一个或第二个DIV应该增长到与另一个相同的高度。

第二个问题是，当宽度不足以容纳2个DIV时，我希望第一个（NomeEvento）div位于顶部。而不是第二个div（DataEvento）。

Answer 1

我不确定我是否理解你的问题。以下布局是否与您想要的类似？ http://jsfiddle.net/5sjgf/

Answer 2

这里有更多的CSS试用。如果你想要左边的边距。我添加了背景颜色以帮助区分。

div.NomeEvento {
    text-align: left;
    float: left;
    width: 75%;
    background-color: #eee;
}

div.DataEvento {
    text-align: left;
    margin-left: 5%;
    width: 20%; 
    float:left;
    background-color: #ccc;
}

Answer 3

对我来说，似乎有很多无关的CSS。但也许其他东西在那里是有原因的。这可以很好地作为你的CSS的总和：

div.Evento {
    overflow: hidden;
    margin-top: 10px;
}

div.NomeEvento {
    background: #eee;
    padding-right: 20%; /* the same as the right column width */
}

div.DataEvento {
    float:right;
    background: #ddd;
}

...但是，如果你正确地浮动一个元素，将它放在中在布局中 - 这里是元素类DataEvento：

<div class="Evento">
    <div class="DataEvento">@evento.Data</div>
    <div class="NomeEvento">@evento.Nome</div>
</div>​

检查：http://jsfiddle.net/J89Hp/

干杯

Answer 4

我在div中使用显示表，表格行和表格单元格完成了我想要的工作。

看一看。这正是我想要的。

http://jsfiddle.net/tcWCC/47/embedded/result/