col1 I am the first column
col2 I am the second column
CSS code:
css code
.main{width:800px;/* Total width */
background:red;
}
.main .col1{
float:left;/* This is the key point. Let col1 float to the left, so that other elements can be placed behind it (on the right) *//* (Other elements: it can be div, pictures, text, etc.) */
width:300px;height:300px;
background:#eee;border:1px solid #ccc;
}
.main .col2{
float:left;/* This is the key Where let col2 also float to the left, immediately behind col1 */
margin-left:5px;/* Let there be some space between col2 and col1 */
width:490px;height:300px;/ * Give a size as you wish*/
background:#ddd;
border:1px solid #ccc;
}
.clear-float{clear:both}/* Clear the float of col1 and col2 , otherwise the height of main will be wrong *//* It does not wrap the float elements inside it. */
HTML structure:
< div class ="main" > main
< ; div class ="col-1" > col1 < /div >
< div class ="col-2" > col2 < /div >
< div class ="clear -float" > clear-float < /div >
< /div >
Effect:
Code
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
