html - 使用CSS在HTML页面上放置三列

我想做一个基本的HTML/CSS网站，有一个标题和下面的三列。但我找不到合适的路线。请帮我纠正我的密码。

    #menu_bar {
      width: 1346px;
      height: 60px;
      margin: 0px;
      padding: 0px;
      background-color: black;
    }
    ul {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    li {
      float: left;
      text-align: center;
      border: 4px black solid;
    }
    a:link,
    a:visited {
      display: block;
      width: 120px;
      color: #ffffff;
      height: 30px;
      padding: 10px;
      background-color: #4169e1;
      font-weight: bold;
      text-decoration: none;
      text-transform: uppercase;
    }
    a:hover {
      background-color: #000080;
    }
    #icon {
      border: none;
    }
    #first_col {
      float: left;
      width: 20%;
      height: 708px;
      background-color: grey;
    }
    #second_col {
      float: left;
      width: 60%;
      height: 708px;
      background-color: green;
    }
    #third_col {
      float: left;
      width: 20%;
      height: 708px;
      background-color: yellow;
    }

<div id="layout">
  <div id="menu_bar">
    <ul>
      <li id="icon">
        <img src="blue.jpg" height="60" width="104">
      </li>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Profile</a>
      </li>
      <li><a href="#">Messages</a>
      </li>
      <li><a href="#">Logout</a>
      </li>

    </ul>
  </div>

  <div id="first_col">

    <p>hello</p>

  </div>

  <div id="second_col">

    <p>post here</p>

  </div>

  <div id="third_col">

    <p>friends</p>

  </div>
  <div>

浏览器中的输出如下
请帮我把第一栏前的空白处去掉。

最佳答案

看起来带hello的盒子和里面有“蓝色”img的盒子是对齐的。
使用cssclear属性将first_coldiv与menu_bardiv分开
因此first_col的css声明如下：

 #first_col
{
    clear: left;
    float:left;
    width:20%;
    height:708px;
    background-color:grey;
}

cssclear属性
left-左侧不允许有浮动元素
正如others所指出的，您需要从其他两列中删除margin-left以使它们彼此相邻。
因此，您最终得到的second_col和third_col声明如下：

#second_col
{
    float:left;
    width:60%;
    height:708px;
    background-color:green;
}

#third_col
{
    float:left;
    width:20%;
    height:708px;
    background-color:yellow;
}