不同高度父DIV

http://jsfiddle.net/fdezluis96/JJ29E/3/不同高度父DIV

我正在做一個類似Twitter的吧，我希望它顯示如圖所示的jsfiddle一些通知。這是一個菜單欄（主頁，連接，朋友，帳戶）和一個登錄按鈕，並且所有對瀏覽器寬度都是動態的，所以我不能把它放到margin:auto;。我想在第二個例子中顯示，但是使用第一個語法，因爲我不能使用表格。代碼：

.navigation{ 
    padding:5px; 
    font-family: HelveticaNeue, Tahoma, Verdana; 
    color: #fff; 
    font-size:20px; 
    background: #333; 
    height:24px; 
    overflow:hidden; 
} 
.subnavigation{ 
    border:1px solid #fff; 
    border-top-width:0px; 
    border-bottom-width:0px; 
    overflow: auto; 
    background: #666; 
    border-radius:5px; 
    border-top-right-radius:0px; 
    border-top-left-radius:0px; 
} 
table{ 
    float:left; 
}

和HTML：

<!--Example one, desired syntax, not working--> 
<div class="navigation">A 
    <div class="subnavigation">B.</div> 
    A 
</div> 

<br /> 
<!--Example two, working but with tables, so its not viable--> 
<table> 
    <td class="navigation">A</td> 
</table> 
<table> 
    <td class="navigation subnavigation"> 
     Scroll content<br /> 
     Lorem ipsum...LALALALA<br /> 
     Just more stuff<br /> 
     And more<br /> 
     And a bit more... 
    </td> 
</table> 
<table> 
    <td class="navigation">A</td> 
</table>

感謝;）

來源

2012-02-25 Luis

好。這裏發生了一些事情。

首先，您確實需要在您的導航中分隔項目。我使用過divs，並且我通過item這個類給了他們全部float: left。這實現了兩件事：它將所有物品放在一行中，並將它們的容器包裹在它們周圍，因此您的「下拉列表」將具有適合下拉菜單中最大項目的大小。

其次，您需要從.navigation中刪除overflow: hidden。這將允許元素（在這種情況下爲.item元素）延伸到該元素的邊界之外。

第三，調整邊距和填充。我在.navigation上保留了5px的填充，但是我已經爲.item添加了負頂邊和一些邊距。

我不清楚，你是否希望這些項目滾動，或顯示爲下拉，所以我做了兩個：

as a dropdown

as a scroll-box

來源

2012-02-25 15:15:54

你又做了 – ShrekOverflow 2012-02-25 16:55:29

是的，我的意思是下拉效果，但我不能在我的網上實現它，http://live-pin.com/現場演示，請幫助。 – Luis 2012-02-25 17:33:41

爲什麼OH爲什麼在'.notify'上有'margin-top：-200px'？ – 2012-02-25 19:58:05

-1

如果你把：

在 subnavigation類

display: inline;

，你應該得到它類似於你的表格示例。

工作例如：

http://jsfiddle.net/JJ29E/4/

結果是這樣的：

enter image description here

來源

2012-02-25 03:41:38

你可以完成使用divs同樣的事情，但對於導航ul會更多的語義。

Demo

li {list-style-type:none; display:block; float:left;} 
.navigation{ height:25px; background: #333;} 
.subnavigation{width:25%; height:100px; background:gray;} 


<ul class="navigation"> 
     <li>A</li> 
    <li class="subnavigation"></li> 
    <li>A</li> 
</ul>

來源

2012-02-25 03:47:30 bookcasey

嗯，將工作，但不是男人，不知道該怎麼做，爲什麼它不工作，http://live-pin.com/ heres現場的例子，謝謝！ – Luis 2012-02-25 04:00:36

請提供[縮小的測試用例]（http://css-tricks.com/reduced-test-cases/）。 – bookcasey 2012-02-25 04:02:49

在完整菜單中使用，你需要看到它完整的理解，不像你的例子那樣工作。 – Luis 2012-02-25 04:03:32

不同高度父DIV

回答

相關問題