2

多数のテーブルを div に変換しています。レイアウト自体は非常にシンプルで、これまでのところ ie と ffx の両方でうまく機能します。しかし、div のコンテンツが収まらない場合、それはそれから成長し、それ以降のすべてを押し下げます... 他の作品では、めちゃくちゃになります レイアウトはこのようなものです,

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
 </div>

右は右にフロートし、タイトルは右の上部にあり、コンテンツはその下にあり、左は左にフロートし、右の高さをスパンします (元は rowspan=2 でした)。問題は、固定の高さが必要なラッパーで発生します。その親には何もないため (したがって、% を使用できません)、コンテンツが動的であるため、必要な高さが事前にわかりません。高さを取り除くと、div が拡張されますが、高さが 0 になったため、div のスタイリング (背景色、境界線など) が消えます。

また、私は既存のコードに取り組んでおり、理想的には JavaScript のハックで混乱させたくないのですが、選択の余地がない場合はそうします。それで、なにかお手伝いできますか？

div.wrapper{ height: 150px ; width: 100% ; } 

div.left{ height: 100% ; float: left ; width: 25% ; text-align: center ; } 

div.right{ float: right ; height: 100% ; } 

div.title{ width: 100% ; height: 50px ; } 

div.content{ width: 100% ; height: 100px ; text-align: center ; }
4

2 に答える 2

3

まず、使わない<div class="title">で、使って<h1>ください。

そうは言っても、height プロパティをいじってみることができると思いますが、CSS がないと何が起こっているのかわかりません。

もう 1 つのトリックは、ラッパーに背景を配置して、左側の div が一番下まで拡大しているように見せることです。Left and Right は、固定幅で左右にフロートし、見栄えがよくなります。

編集：

わかりました、CSS を見た後、あなたがしたいことは、ラッパーの最後に clear:both を追加することです。

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
    <div style="clear both;"></div>
 </div>

次に、これに有効な「ハック」は、通常はラッパーの左にある背景を設定することです。このように、実際にはスタイリングを含むラッパーである場合、Left がスタイリングされているように見えます。

ちなみに、div.class には行かず、.class を使用してください。

于 2009-08-01T20:20:09.663 に答える
0

フロートを含める必要があると思います

div.wrapper { overflow:hidden; }

ただし、実際にいくつかの css を貼り付けると役立ちます。

編集: 列で 100% の高さを複製するには、前に述べたように偽の列に依存する簡単な方法です。効果がないため、列に。

于 2009-08-01T20:19:07.343 に答える