Question

如何将菜单栏与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>

Answer 1

在两者上添加clearfix课程。

<强> DEMO

.clearfix{
clear:both;
}

<强> DEMO1

Answer 2

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

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

http://jsfiddle.net/mrYdV/1/

演示

Here is a list of other property/value pairs that trigger block formatting context

W3C specification

Bulletproof backwards-compatible version

在How does the CSS Block Formatting Context work?

上有一个很好的答案，详细介绍了这种方法

Answer 3

clear属性会为您执行此操作。您可以将其添加到#container，例如：

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

清除意味着：

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

等效的CSS？

3 个答案: