使用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 - 左侧不允许浮动元素

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

Answer 2

删除margin-left和#second_col上的#third_col。

Answer 3

你可以用你喜欢的另一个div包装你的所有三个div

 <div id="wrapper">
    <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>

然后您可以根据需要手动设置包装器div的宽度高度。

Answer 4

只需添加位置：在你的css id menu_bar中修复

#menu_bar {
      width: 1346px;
      height: 60px;
      margin: 0px;
      padding: 0px;
      background-color: black;
  position:fixed;
    }
    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>