html - 使用 CSS 在 HTML 页面上定位三列

Question

我想制作一个基本的 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>

浏览器中的输出是这样的

请帮我删除第一列之前的空格。

Answer 1

看起来带有 hello 的框与其中带有“Blue”img 的框对齐。

使用 CSS clear用于将 first_col div 与 menu_bar div

分开的属性

所以你的 first_col 的 css 声明应该是这样的:

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

css clear 属性

left - No floating elements allowed on the left side

正如 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;
}