0

Google Calendarに見られるものと同様に、固定幅と伸縮性のある CSS コンテンツの両方を使用しようとしています。これは min-width と max-width を使用して簡単に達成できると思いましたが、最大幅まで伸ばすのではなく、単に最小幅に固執しているサブ要素に問題があります。

デモはここで見ることができます。

4

3 に答える 3

1

とにかく、実際には最小/最大幅を設定する必要はありません。

http://jsfiddle.net/UyZ6T/1/

問題は基本的にfloat: left;ストレッチ1でした。固定サイズの部分でのみ必要です。これは基本的に次のことを意味します。「私は今左側にいて、他のすべては右側のスペースを取ります」。floatプロパティを持つdivは、残りの部分を拡張できるように、スペースをできるだけ少なくしようとします。

于 2012-07-28T16:28:57.153 に答える
1

から削除float:leftし#stretch-1ます。フィドル

于 2012-07-28T16:34:52.813 に答える
0

基本的に、固定幅の要素を含む流動的なレイアウトを作成しようとしています。これを Google カレンダーのように機能させるには、すべての親要素にパーセンテージ幅を設定する必要があります。CSS を次のように変更してください。

#container {
max-width:1280px;
min-width:260px;
    width:90%;
height:200px;
margin:auto;
background:#000;
}

#fixed-1 {
width:200px;
height:200px;
float:left;
background:#3fb44a;
}

#stretch-1 {
min-width:60px;
    width:20%;
height:200px;
float:left;
background:#c44d58;
}

#sub-content {
width:100%;
height:20px;
background:#4788ef;
}

</p>

于 2012-07-28T16:43:37.623 に答える