css拉伸水平浮動div

我正在嘗試使用靜態高度和可變寬度來創建div。使用多個水平標籤。活動選項卡應水平拉伸以填充容器，非活動選項卡應縮小到其不活動大小（本例中爲24px）。css拉伸水平浮動div

我無法完成它的工作。該選項卡伸展，但太多。它將標籤之後的標籤碰到下一行，這種情況不會發生。我無法弄清楚如何使這項工作像我想要的那樣。

我所試圖做的可以在[鏈接刪除]

我敢肯定，那裏有一個辦法做到這一點，因爲我已經看到它之前完成，但我無法找到一個可以看到它的例子。知道我做錯了什麼？

來源

2010-07-22 Bocochoco

請發佈示例。我試過你的代碼，我仍然無法弄清楚你正在嘗試做什麼。 – Catfish 2010-07-22 20:27:30

你在尋找一個水平的手風琴嗎？

有幾個在線的例子。如果您希望打開的選項卡佔用容器選項卡寬度的所有空間，則最好依靠Javascript進行計算。

來源

2010-07-22 20:48:37

這正是我想要做的。我想不起它叫什麼。謝謝：） – Bocochoco 2010-07-23 18:51:18

<style> 
#navigation 
{ 
    border: 1px solid #000000; 
    height: 400px; 
    margin: 10px 25px; 
    padding: 0px; 
    width: auto; 
} 
.item 
{ 
    display: block; 
    float: left; 
    height: 100%; 
    margin: 0px; 
    overflow: hidden; 
} 
.item img { float: left; margin-right: 5px;} 
.closed 
{ 
    width: 10%; 
} 
.open 
{ 
    width: 80%; 
} 

</style> 

</head> 

    <body> 
     <div id="navigation"> 
     <div class="item open"> 
      <img src="hometab.png" alt="Home" /> 

      Open Tab Open Tab 
     </div> 
     <div class="item closed"> 
      <img src="hometab.png" alt="Home" /> 
      Open Tab Open Tab 
     </div> 
     <div class="item closed"> 
      <img src="hometab.png" alt="Home" /> 
      Open Tab Open Tab 
     </div> 

     </div>

來源

2010-07-22 20:35:40 Developer

請參閱示例鏈接。它更好地顯示了我正在嘗試做的事情。 – Bocochoco 2010-07-22 20:39:45

感謝您提出更清晰的問題。檢查安塞爾 – Developer 2010-07-22 20:50:34

你對的承諾如何？#navigation？

如果您將#navigation的寬度設置爲固定值，併爲.open設置適當的寬度值，那麼它看起來相當不錯。

當我在FireBug中玩你的例子時，我使用了400的#navigation和350的.open，它似乎工作的很好。

來源

2010-07-22 20:52:48 theycallmemorty

由於打開標籤的寬度爲100％，嘗試將其設置爲80％或90％，爲其後的額外「標籤」留出空間，因此多餘的項目可能會被撞到下一行。「關閉」選項卡應該也可以有一個百分比寬度，它們應該全部加在一起等於100％ - 它們容器的整個寬度。

來源

2010-07-22 20:56:34 SteveH

以下辦法爲我工作：

讓「W」是的div原始的寬度和要通過「X」像素舒展它。添加下面的CSS就可以了：

{ 
    width: (w + x) px; 
    margin-left: -x/2 px 
}

例如如果原始寬度是300px，並且您想將其拉伸50px，則額外的CSS將爲：

{ 
    width: 350px; 
    margin-left: -25px 
}

來源

2016-02-12 06:46:18

css拉伸水平浮動div

回答

相關問題