2

如何将菜单栏与div中的主体分开，将所有内容放在其下方，是否有相应的代码，如换行符？我非常感谢您的帮助:) 提前感谢这里是图片拍摄的链接：

CSS

/* because of the * default code it takes out all margin and padding */
* {
    margin: 0px;
    padding: 0px;
}
#container {
    display: table;
}
#row {
    display: table-row;
}
#left, #right, #middle {
    display: table-cell;
}
#row {
    display: table-row;
}
#left, #right, #middle {
    display: table-cell;
}
body {
    font-family: verdana;
    font-size: 10px;
    background-color: ABC;
    padding: 50px;
    margin: auto;
}
h1 {
    text-align: center;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    float: left;
    position: relative;
}
li + li {
    border-left: 1px solid #ccc;
}
a {
    display: block;
    padding: 7px 10px;
    color: #222;  /*changes the color of all item font color in menu bar */
    background: #eee; /*changes the background color of Menu bar */
    text-decoration: none;
}
a:hover {
    color: #fff;
    background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
    color: #f2f75e;
    background: #0090cf;
}
/* Child Menu Styles */
.level-two {
    position: absolute;
    top: 100%;
    left: -9999px;
    width: 100px;
}
li:hover .level-two {
    left: 0;
}
.level-two li {
    width: 100%;
    border: 0;
    border-top: 1px solid #ccc;
}

HTML

<h1>
  <ul class="level-one">
    <li> <a href="#">Home</a> </li>
    <li> <a href="#">Drops</a>
      <ul class="level-two">
        <li> <a href="#">One</a> </li>
        <li> <a href="#">Two</a> </li>
        <li> <a href="#">Three</a> </li>
      </ul>
    </li>
    <li> <a href="#">Contact</a> </li>
  </ul>
  </div>
  <div id="container">
    <div id="row">
      <div id="left">
        <h4>Left Col</h4>
        <p>...</p>
      </div>
      <div id="middle">
        <h4>Middle Col</h4>
        <p>...</p>
      </div>
      <div id="right">
        <h4>Right Col</h4>
        <p>...</p>
      </div>
    </div>
  </div>
</h1>
4

3 回答 3

2

在两者上添加clearfix类。

演示

.clearfix{
clear:both;
}

演示1

于 2013-08-19T12:20:17.260 回答
2

该属性的一种替代方法clear是在菜单上触发一个新的块格式化上下文，以便在其中包含浮动.level-one：

.level-one {
    /* trigger block formatting context to contain floats. */
    overflow: hidden; 
}

演示在http://jsfiddle.net/mrYdV/1/

这是触发块格式化上下文的其他属性/值对的列表

W3C 规范

防弹向后兼容版本

在CSS 块格式化上下文如何工作？

于 2013-08-19T12:24:16.583 回答
1

clear属性将为您执行此操作。您可以将其添加到您#container的示例中：

#container {
    display: table;
    clear:both;
}

清除意味着类似：

清除该元素两侧的所有元素

于 2013-08-19T12:20:10.343 回答