等價於CSS的tr？

如何將菜單欄與div中的主體區分開來，以便在聯繫人下面放置所有內容，是否存在與換行符相對應的代碼？我會很感激的幫助:)在此先感謝這裏拍攝的一張照片的鏈接：等價於CSS的tr？

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>

來源

2013-08-19 Daryl

你可以添加的一些更多的背景是什麼你正在努力完成？這聽起來像你需要開始使用浮動，而不是表格式的顯示... – robooneus

上都添加clearfix類的。

DEMO

.clearfix{ 
clear:both; 
}

DEMO1

來源

2013-08-19 12:20:17 falguni

明確：兩者都表示換行符？另一個問題是如何擴展菜單欄以適應寬度？能夠得到這樣的佈局？鏈接文件拍攝圖片：http：//postimg.org/image/f7rze5wuv/ – Daryl

@Daryl像這樣我更新我的答案在DEMO1 – falguni

OMG你是一流的，這是好多了，但我不明白，我會盡力去理解。我會投你的答案:)榮譽 – Daryl

的clear屬性將做到這一點的您。你可以把它添加到您的#container例如：

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

清除意思是這樣的：

清楚這個元件兩側的所有元素

來源

2013-08-19 12:20:10 Niklas

明確：都意味着換行？另一個問題是如何擴展菜單欄以適應寬度？能夠得到這樣的佈局？鏈接文件拍攝圖片：http：//s23.postimg.org/mazuts2aj/zzzzzzzz.png – Daryl

你可以嘗試解決*寬度：100％; *但我真的認爲你應該發佈這個問題作爲一個新的。 – Niklas

一個替代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?

來源

2013-08-19 12:24:16 xec

等價於CSS的tr？

回答

相關問題