해당하는 tr?

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

HTMLclear 속성은이 작업을 수행합니다

<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 클래스를 추가 :

는

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

지우기 같은 것을 의미합니다 의 . clear 속성

DEMO

.clearfix{ 
clear:both; 
} 

DEMO1

Answer 2

당신. 당신은 예를 들어 당신의 #container에 추가 할 수 있습니다 :이 요소의 양쪽에

분명 모든 요소

Answer 3

한 대안 .level-one 내부에 플로트를 포함하기 위해 메뉴에 새로운 블록 포맷 컨텍스트를 트리거하는 것이다

(210)

데모 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?