0

以下に示すリキッドレイアウトをCSSで構築しようとしています。 液体レイアウト

左の列は利用可能なすべてのスペースに拡張する必要があり、可能であれば同じ行に配置する必要があります。右の列は同じ幅にする必要があります。

私はすでに、私が望むものに非常に近い結果を達成しています。http://jsfiddle.net/tcWCC/34/embedded/result/を見てください 。しかし、2 つの問題があります。整列された両方の DIV の高さは等しくなければなりません。最初または 2 番目の DIV は、他の DIV と同じ高さに成長する必要があります。

2 つ目の質問は、幅が 2 つの DIV に対して十分でない場合、最初の (NomeEvento) div を一番上にしたいということです。2 番目の 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 に答える