0

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

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

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

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

4

4 回答 4

2

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

于 2012-05-09T00:01:45.957 回答
0

这里有更多的 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;
}
于 2012-05-09T00:08:43.393 回答
0

对我来说，这似乎是很多无关的 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/

干杯

于 2012-05-09T00:13:11.287 回答
0

我在我的 div 中使用显示表格、表格行和表格单元格完成了我想要的内容。

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

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

于 2012-05-09T23:29:42.280 回答