margin-top の設定が無効です_html/css_WEB-ITnose

本帖最后由 Jasmine_xiaocao 于 2013-01-25 09:57:12 编辑

b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7左右结构-float6e916e0f7d1e588d4f442bf645aedb2f
46d5fe1c7617e3914f214aaf043f4ccf
#header,#container,#footer{width:800px; }
#header {background: #F00;}
#container .left{height:500px;width:450px;background: #0F0;float:left;}
#container .right {height:400px;background: #0FF;width:300px; float:right;}
#footer {background:#00F;clear:both;}

531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
32036ef6af947474ac5613c837982952
4de7f166fcc9e016381fa981074c83d1
c1a436a314ed609750bd7c7d319db4da头部2e9b454fa8428549ca2e64dfac4625cd
16b28748ea4df4d9c2150843fecfba68
496f89b760b4fbcfa69769894f6abfc3

6b9440c18318d73936b22523ce7e854f
e0e6b80c2b871989cf94b51f0a97caf2
    c36fa6f5762f7bafa55e37dd53e22431
1201755a16c17bb0d9ea502d4723f8f2
 左右结构实现方法：left设置float为left浮动，
right设置float为right浮动，可实现左右结构0c6dc11e160d3b678d68754cc175188a
缺陷：当left高于right时显示会出现问题,footer清除浮动clear:both可解决此问题
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

49a1179c38f42ce51d91de78eafc3198
449a3f648c0a9150d90826a379b1bfd9
 左右结构实现方法：left设置float为left浮动，
right设置float为right浮动，可实现左右结构0c6dc11e160d3b678d68754cc175188a
缺陷：当left高于right时显示会出现问题,footer清除浮动clear:both可解决此问题
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
cde6e9ac7920c2cc1f666612d29b4125


a73763342267193c0b77be1e82b71b28
cb8d7503cf17698f22935e80e47542b4
c1a436a314ed609750bd7c7d319db4da底部2e9b454fa8428549ca2e64dfac4625cd
16b28748ea4df4d9c2150843fecfba68
d423f2b0e734d48907c8780c28d496c7
36cc49f0c466276486e50c850b7e4956

表示効果

マージンを設定します-top が無効です。どのように設定すればよいですか?

ディスカッションへの返信(解決策)

padding-top

padding-top

padding-topの設定がまだ間違っており、レンダリング:

margin: 外側のマージン

padding: 内側のマージン

あなたが設定しました要素の margin-top または padding-top を設定するか、左側の要素の padding-button を設定することで目的を達成できるはずです

margin-top:550px

を設定して、float をクリアする原理を体験してください 笑

最も愚かな方法: フッターの外側 div を設定し、この div に padding-top を追加します。

CSS code?1margin-top:550px

設定できます

CSS code?1margin-top:1000px

float をクリアする原理を体験してください 笑

確かに、margin-top を 550 以上に設定するだけで大​​丈夫です 理由を教えてください?クリアに関連:両方?初心者でよくわかりませんが、アドバイスをお願いします

#container .left 互いに近づかないように、margin-bottom: 20px; を追加します。

フロートをクリアするということは、実際には、フローティング要素のためのスペースを確保するために十分な垂直方向のマージンを残すことを意味します。あなたの例では、margin-top が 550 未満の場合、十分なスペースが残っていないことを意味します。

float をクリアしてください。 ！ ！ ！

まず、div

margin-top:1000px

に div を入れすぎるのはお勧めできません

<div id="right"> <div class="right">  左右结构实现方法：left设置float为left浮动，right设置float为right浮动，可实现左右结构<br>缺陷：当left高于right时显示会出现问题,footer清除浮动clear:both可解决此问题</div> </div>

に変更しても構いません

右と同じです。この問題の主な理由は、#container に高さがないことです。このレイアウト方法に高さがない場合、次のようになります

非常に言葉にならないです。元の投稿者が投稿した画像のテキストに注目してください。問題の解決策はそこにはありません。または、 margin-bottom:10px; を直接追加することもできます

最も愚かな方法: フッターの外側に div を配置し、この div に padding-top を追加します。

この方法を試してみましたが、うまくいきませんでした

まず、divCSS コード内であまりにも多くの div を使用するのは適切ではありません?1234567933da5eb64e67ee2599877186ac08c97 8b1c5784e2ac3daa74d5f856d094a482 左右構造の実装方法: 左設定 Float は左フローティング、右設定は右フロートに設定され、左右構造を実現できます
欠点: 左が右より高い場合、表示の問題が発生します。フッターfloat clear:both はこの問題を解決できます16b28748ea4df4d9c2150843fecfba68 < /……

はい、これも可能です

#container .leftこれに隣り合わないようにマージン-bottom: 20px を追加します。 。 それもうまくいきませんか？ ? ?

とても言葉が出ない。元の投稿者が投稿した画像のテキストに注目してください。問題の解決策はそこにはありません。または、 margin-bottom:10px; を直接追加することもできます

ご協力ありがとうございます。まだまだ基礎知識が足りないようです。ご容赦ください

引用 7 階 xiaojia_37 からの返信: #container .left 隣り合わないように margin-bottom: 20px; を追加します。それもうまくいきませんか？ ? ?

大丈夫です