0

私はまだ私のdivを理解するのに少し苦労しています。ブラウザ/画面サイズに応じてサイズが変わるウェブサイトを作ろうとしています。

私はここまで来ました：

私のhtml：

<div id="wrapper">
  <div id="header">Header</div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="footer">Footer</div>
</div>

私のCSS：

#wrapper{width: 60%;}

#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left;  width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}

これで、私の div は正確に適切なサイズになりました。問題は、conect が常に div の一番下にあることですが、通常の div のようにする必要があるため、何でも実行できます。通常の div のように使用する最も簡単な方法は何ですか?

助けてくれてありがとう！:)

編集:これは次のようになります: http://jsfiddle.net/rswML/ ...そして、私が言ったように、問題はテキストが常にdivの一番下にあるということです。パディングトップが原因であることは理解していますが、幅に対する高さの比率を維持し、divを通常どおり使用する必要があります。

4

3 に答える 3

0

解決策は、ヘッダー div の position: relative を作成し、その中に別の div を作成する必要がありました。それは position: absolute および width/height: 100% でした。

于 2013-03-24T14:41:58.990 に答える
0

問題はパディング値にあると思います。おそらく、それらを調整することで、必要なコントロールが可能になるか、マージントップの方が良いでしょう. また、要素 #left と #right の上部を揃えたいかどうかはわかりませんが、これらのパディング設定は異なる値でレンダリングされる場合があります。パーセンテージを含む padding-top プロパティは、含まれているブロックの幅を参照します。それが役立つことを願っています。乾杯。

于 2013-03-24T06:00:15.730 に答える
0

ここで試みているのは、レスポンシブ デザインのコンセプトです。これについては、ブートストラップフレームワークを試してみることをお勧めします。自分ですべてを行うのではなく、クラスを div に追加するだけですべてを行うことができます。

レスポンシブ Web デザイン (RWD) は、さまざまなデバイスで最適な表示エクスペリエンス (サイズ変更、パン、スクロールを最小限に抑えた読みやすさとナビゲーション) を提供するサイトを作成することを目的とした Web デザインのアプローチです。

于 2013-03-24T04:40:54.073 に答える