ホームページ >ウェブフロントエンド >htmlチュートリアル >間違った div 位置_html/css_WEB-ITnose
私の当初の意図は、上の 2 つを並べて、3 つ目を下に置くことでした
b6a00617b1dce15cd517c1b1ff823ce3 0408d29daeaa1cd46a8559e557760641左部分16b28748ea4df4d9c2150843fecfba68 ;
2599c84ca173ba4c479313ffa3421831右側の部分16b28748ea4df4d9c2150843fecfba68 -body{
width:900px;
margin:0px;自動;
パディング:0;
}
div.left{
width:600px;
height:600px;
float:left:0px;
表示される場合、最初の値は常に一定の距離になります。左から2番目が配置できないようにすると、下に表示されます
ディスカッションへの返信(解決策)
青い部分が左側、黒い部分が本体です。青は左側ではないでしょうか? ? ? ? ?
レイアウトを制御するためにテーブルを使用して、div がテーブルに埋め込まれていないのはなぜですか?
<!DOCTYPE html><html><head><style>* {margin:0px;padding:0px}#page {width:900px;background:#ccc;margin:100px auto;}#left {width:450px;height:50px;background:blue;float:left;}#right {width:450px;height:50px;background:red;float:left;}#down {width:900px;background:green;height:50px;float:left;}</style></head><body><div id="page"><div id="left">left</div><div id="right">right</div><div id="down">down</div></div></body></html>
div.main-body{width:900px;height:900px;background:#6F9;margin:0px auto;padding:0;}div.left{width:600px;height:600px;background:#00F;float:left;margin-left:0px;}div.right{width:300px;height:600px;background:red;float:left;margin-left:0px;}
絶対を統合し、最後に相対を含めることをお勧めします。これが最も簡単です。最も直感的な方法は、単に top、left、right、bottom: を使用することです。