ホームページ  >  記事  >  ウェブフロントエンド  >  フローティング div センター表示の問題_html/css_WEB-ITnose

フローティング div センター表示の問題_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 09:44:302117ブラウズ

HTML

2 つの div を内部の中央に配置するにはどうすればよいですか?
<div style=" width:100%; height:200px; border:1px solid red; text-align:center; margin:0px auto;"><div style=" width:150px;; height:120px; border:1px solid yellow; margin:10px 10px 0px 0px; float:left; "></div><div style=" width:150px; height:120px; border:1px solid red; float:left; margin:10px 10px 0px 0px; "></div></div>

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

2 つの div を固定幅で中央揃えでインストールするには、1 つの div を使用するだけです

15222d4a9e8324673ead58c0476d244e 8c18a372a0fb4358a455e54bbdbabb5d 2ef75553241b2cb9b0168f98633cfaac16b28748ea4df4d9c2150843fecfba68 幅:150px; 境界線:1px; :10px 10px 0px 0px; ">16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

3階のコードが実装できます。
ただし、最初の文の text-align:center; は追加する必要はないようです。

text-align:center はテキストを制御し、DIV の位置とは何の関係もないことを覚えています。


<div style=" width:100%; height:200px; border:1px solid red;margin:0px auto;"> <div style="width:345px; margin:0px auto;"> <div style=" width:150px; height:120px; border:1px solid yellow; margin:10px 10px 0px 0px; float:left; "></div> <div style=" width:150px; height:120px; border:1px solid red; float:left; margin:10px 10px 0px 0px; "></div> </div></div> 

2つのdivを固定幅と中央に接続するには1つのdivを使用するだけです

固定幅以外の方法はありますか?


<div style=" width:100%; height:200px; border:1px solid red;  margin:0px auto;"><div style=" width:20%;; height:120px; border:1px solid ; display:inline-block;  margin:10px auto 0px 30%;"></div><div style=" width:20%; height:120px; border:1px solid red; display:inline-block; margin:10px auto 0px auto;"></div></div>

外側の div はパーセンテージで、内側の div の長さが px で設定されている場合、中央に配置したい場合はマージンの幅を計算する必要があります。これは、内部 div の幅をパーセンテージに設定することで解決できます。

2 つの div を接続するには 1 つの div を使用するだけです。


2 つの div を接続するには、幅と中央を固定するだけです。

固定幅以外の方法はありますか?

どういう意味ですか?あなたの中の2つの層が浮いている!他の方法はまだ知りません。

1. bacbf9e1ad7f40415ce1670e31edfee3adca8a5fa06ffeafb062c2e3f274b930 を使用します。
2. css;#div1,#div2 {margin:0 atuo;} を使用します。8b05045a5be5764f313ed5b9168a17e6 を忘れずに宣言します。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。