There is a DIV and I want to divide it into three columns.
body,ul,p,h1,h2,h3,h4,dl,dd,form,input,textarea,select { padding:0; margin:0; font-family:arial; }
# top { width:1000px; height:222px; margin:0 auto; border:1px solid #F11418; }
.left_nav { width:404px; height:222px; float:left; border:1px solid blue; }
.logo { width:192px; height:222px; margin:0 auto; background:#A28C8D; }
.right_nav { width:404px; height:222px; float:right; border:1px solid green; }
But the last column: right_nav always falls on the next line and cannot be in the same column. How to deal with it?
Reply to the discussion (solution)
Brother, the sum of the widths of your three divs: .left_nav, .logo, and .right_nav has been It has reached 1000px. . You also set a 1px border for them,,,, can they not exceed the width and fall apart? ! !
I set 1000PX to 1100PX and the third column is still missing!
.logo does not have float, so the following .right_nav will start on a new line, regardless of whether it can be arranged or it will float;
1. Do not specify the width of logo, it will automatically Fill the remaining width of left_nav and right_nav
2. The logo should be written after right_nav
< ;/div>
Because:
left_nav has float:left He will leave the document flow and float on the left
right_nav With float:right it will leave the document flow and float on the right
The logo does not have a float attribute, so it occupies the position of the normal document flow, but the left and right sides are squeezed out by floating divs
Thanks for the advice upstairs
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
