CSS的等效tr？

Question

如何在一个div中把菜单栏和body分开，把所有contact之后的东西都放在它下面，有没有对应的代码，比如换行符？我非常感谢您的帮助:) 提前致谢 这是图片截图的链接：

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

清除的意思是：

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