Home >Web Front-end >HTML Tutorial >Wrong div position_html/css_WEB-ITnose
Wrong div position_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:16:291307browse
My original intention was to have the top two side by side, and the third one at the bottom
b6a00617b1dce15cd517c1b1ff823ce3
0408d29daeaa1cd46a8559e557760641left part7a92f012bb45862a84fa2b079104dd41
div.main-body{
width:900px;
height:900px;
background:#000;
margin:0px auto;
padding:0;
}
div.left{
width:600px;
height:600px;
background:#00F;
float:left;
margin-left:0px;
}
When displayed, the first one is always some distance away from the left, so that the second one cannot be placed, and then it is displayed below.
Reply to discussion (solution)
The blue part is left, and the black part is main-body. Shouldn't blue be on the left? ? ? ? ?
Why don’t you use a table to control the layout? The div is embedded in the table
<!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> The first step is to reset the css
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;} When encountering layout and position problems, it is recommended to unify absolute and finally include a relative. This is the easiest and most intuitive. Just use top, left, right, bottom: .