0

私は基本的なシステムを作ろうとしていますが、スタイリングはdivで行う必要があります。

問題は、私が自分で行うときは常に div のスタイリングを台無しにしているということです。同様に、div はコンテナー div から出ていきます。

私がアーカイブしようとしているのは非常に基本的なものです。

  • 800x800 のコンテナ div が必要です。
  • 最初の 200px の高さと 600px の幅には、description という名前の新しい div が含まれている必要があります。
  • 右側の 200px 幅は、logo という名前の新しい div にする必要があります。
  • ここには、高さ 200px、幅 800px の別の div があるはずです。

  • 下部では、高さ 400px、幅 800px を使用しています。私はそれを次のようにしたい: (すべて 400px) 高さ。

    左から右へ;

100px - block という名前の div (ブロック画像を含む) 150px - item-1 という名前の div。100px - block という名前の div (ブロック画像を含む) 150px - item-2 という名前の div。100px - block という名前の div (ブロック画像を含む) 150px - item-3 という名前の div。100px - block という名前の div (ブロック画像を含む)

この場合、誰かが私を助けてくれますか? 少し例を挙げてみます。

ありがとうございました。

4

2 に答える 2

1

次のコードが役立ちます。合計幅が 800px を超えているため、幅を 850px に増やしました。

<body>
<div style="width:850px; margin:0 auto;">
    <div style="height:400px; width:100px; float:left" name="block"></div>
    <div style="height:400px; width:150px; float:left" name="item-1"></div>
    <div style="height:400px; width:100px; float:left" name="block"></div>
    <div style="height:400px; width:150px; float:left" name="item-2"></div>
    <div style="height:400px; width:100px; float:left" name="block"></div>
    <div style="height:400px; width:150px; float:left" name="item-3"></div>
    <div style="height:400px; width:100px; float:left" name="block"></div>
    <div style="clear:both"></div>
</div>
</body>
于 2012-11-05T19:59:38.787 に答える
-1

まず、ここにいるほとんどの人は、あなたに代わって仕事を頼まれることを快く思っていません。やりたいことを試してから、ここに戻って特定の質問をする方がはるかに良いでしょう.

そうは言っても、投稿内のメモを考慮して、代わりに、あなたが述べた質問の下にある問題を解決しようとします.

float と、フロートが HTML 要素 (およびその親要素) にどのように影響するかについてよく理解していないように思えます。CSS-Tricks には floats に関する驚異的な記事があります。つまり、要素に適用floatすると、HTML ドキュメントの通常のフローから除外され、ブロックレベルの要素を互いに並べることができます。コンテナーのすべての子要素が編集されると問題が発生しfloat、親コンテナー自体が折りたたまれます。floatこの折りたたみ効果は、1 つの子要素がed で、別の子要素がそうでない場合にも発生する可能性があり、非floated 要素が占める垂直方向のスペースは、floatエドワン。そのような状況では、親はその小さい方の子要素に「折りたたまれ」、より大きな浮動要素が親からオーバーフローしたままになります。フロート (およびフロートのクリアリング) がどのように機能するかを理解すると、生活がずっと楽になります。

さらに、display: inline-block;水平方向のナビゲーションなどで多くの頭痛の種を解決できる も検討することをお勧めします。

編集リンクしたサイトの外観から、もう 1 つの問題は、コンテナー要素の高さを修正しようとしていて、子要素の合計高さが親よりも高くなることです。そのために、CSS ボックス モデルの情報については、CSS-Tricks を参照してください。

要するに、2 フィートの高さの箱があり、その中に 1 フィートの高さと 1.5 フィートの高さの 2 つの箱を積み重ねると、内側の箱がコンテナからはみ出します。それらの高さの合計がコンテナの高さよりも大きくなるためです。特に固定サイズを使用している場合は、同じ概念が Web デザインにも当てはまります。

于 2012-11-05T20:01:55.977 に答える