left part 🎜>
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>Copy after login
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;}Copy after login
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
