1

cal-containerというdivの中にあるcalendarというdivがあります。カレンダーの幅は100％なので、現在はcal-container全体を占めています。

サイドパネルのdivを追加する必要があります。このdivの幅はに固定されてい150 pixelsます。したがって、＃calendar widthは＃cal-containerwidth-150pxである必要があります。これはCSSで可能ですか、それともテーブルを使用する必要がありますか？

可能であれば、例はありますか？私はそれをグーグルで検索しましたが、私が欲しいもののようなものは何も思い浮かびませんでした。ボタンをクリックすることでサイドパネルを非表示および表示できるため、パディングの追加は機能しません。

これが私の意味の考え方です。日数の部分は#calendarであり、予定外の部分は150pxのサイドパネルです。

カレンダーを左に浮かせ、サイドパネルを右に閉じて幅を150pxにしてみました。しかし、そのdivを非表示にすると、カレンダーは100％になるはずです。

ここに画像の説明を入力してください ありがとう

このように、青が横、カレンダーが左になりますが、カレンダーは部屋側を占める必要がありますが、非表示の場合はそうではありません。 http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html

フロートの結果： ここに画像の説明を入力してください

4

2 に答える 2

3

ここであなたのための実用的な解決策を手に入れました。

これを機能させるためのコードは、基本的に次の構造に依存します。

<div class="sideBar">
  ...
</div>
<div class="tableWrapper">
  <table>
    ...
  </table>
</div>

次に、要素に次の重要なCSSプロパティがあることを確認します。

.sideBar {
  float: right;
}

.tableWrapper {
  overflow: hidden;
}

table {
  width: 100%;
}

ここで起こっていることは、.sideBarフロートが正しく浮かんでいて、必要なスペースを占有しているということです。その間、.tableWrapperはのおかげで残っているスペースをすべて占有しoverflow: hiddenます。最後に、table使用可能な幅の100％を占めるようにに指示します。

デモのボタンをクリックすると、テーブルのサイズが自動的に変更されます。

于 2013-03-07T14:39:37.760 に答える
0

すべての主要なブラウザとIE10はフレックスボックスをサポートしています。サポートされていません<IE10。

于 2013-03-07T14:33:14.847 に答える