0

3 つの DIV で構成される単純な Web ページがあります。次のような降下 CSS スタイルが必要です。

上部と下部の div は最小幅を固定する必要があります (たとえば、20 ピクセル、それが不可能な場合は 0 ピクセルまで)。

中央の div は固定幅 (1000 x 700 ピクセルなど) にする必要があります。

すべてのdivに固定幅/高さを設定すると、画面が伸びていないことを除いてすべて問題ありません。上部と下部の div の高さを自動に設定すると、2 番目の (固定サイズ) div が画面の上部に取り付けられ、上部の div のサイズは 0 になり、下部のサイズの di も奇妙なサイズになります。

すべての CSS 属性を含む HTML コード:

<body style="background-color:#030303; margin:0px; padding:0px;">
<!--head-->
<div style="margin:0 auto; width:100%; height:auto; border:0px solid red; background-color:#181818; position:relative;">
 (some images)
</div>
<!--gallery-->
<div id="galleria" style="height:700px;width:1000px; margin:0 auto; border:1px solid green;   ">
    <a href="img/img1.jpg"><img src="img/thumb1.jpg" data-title="My title" data-description="My description"></a>
    <a href="img/img2.jpg"><img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a>
</div>
<!--footer-->
<div style="  margin:0 auto; top:0px; width:100%; height:auto; position:relative; border:1px solid red; line-height:128px; background-color:#181818">
    <div align="center" >
     (some images)
     </div>

</div>
</body>
4

2 に答える 2

0

まず、スタイルを HTML から適切な CSS 形式に変換します。次に、質問をより適切に定義できるように、HTML を単純なフォームに分解しました。

http://jsfiddle.net/HF6Cc/

HTML:

<body>

<!--head-->
<div class="head">header</div>

<!--gallery-->
<div id="galleria" class="middle">
    <a href="img/img1.jpg"><img src="img/thumb1.jpg" data-title="My title" data-description="My description"></a>
    <a href="img/img2.jpg"><img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a>
</div>

<!--footer-->
<div class="footer">footer</div>

</body>​

CSS

body { width:1000px; margin:0; padding:0; }

.head { margin:0 auto; background-color:orange; }

.middle { margin:0 auto; background-color:lime; }

.footer { margin:0 auto; background-color:yellow; }

さて、このレイアウトで何をしようとしているのでしょうか。

于 2013-01-02T19:10:39.483 に答える
0

あなたの質問は少し紛らわしいです (幅と言うとき、高さのことですか?)。私の理解が正しければ、3 つの div を合計してビューポートの高さの合計にする必要があります。これを行うには、絶対配置または表示の 2 つの方法を知っています: テーブル スタイルです。私の経験では、最初の方が効率的です。

<div id="topbar">Top</div>
<div id="mainarea">Middle</div>
<div id="footbar">Botton</div>

#topbar, #mainarea, #footbar { position: absolute; overflow: auto; }
#topbar { height: 20px; top: 0; left: 0; right: 0; }
#mainarea { top: 20px; left: 0; right: 0; bottom: 20px; }
#footbar { height: 20px; left: 0; right: 0; bottom: 0; }

実際に幅も割り当てたい場合は、「適切な」スタイルを削除して、3 つすべてに同じ幅を割り当てます (一般に、人々に幅を強制するのは賢明ではありません)。

于 2013-01-02T19:11:26.070 に答える