跨度粘貼到頂部的CSS div？

我還是新來的CSS，但我一直在試圖找到這個問題的答案几天，現在我只是不能擊中正確的網站或搜索短語來發現信息。或者我只是沒有得到我正在閱讀的內容。跨度粘貼到頂部的CSS div？

我想要的是像DIV頂部的標題欄。我會有一些元素是這個DIV的子元素，然後是一個或多個DIV。插入彼此之後。這些標題欄DIV也將用於摺疊和展開，以隱藏和展示他們的孩子，如果這有什麼不同。

我該如何做到這一點與CSS類？ Like class =「titleDiv」then

.titleDiv { text：left align; span：right align; }

<div>Title Text Left Aligned <span>Item Count Right Aligned</span> 
    <element></element> 
    <element></element> 
    <element></element> 
</div> 
<div>Title Text Left Aligned <span>Item Count Right Aligned</span> 
    <element></element> 
    <element></element> 
    <element></element> 
</div> 
<div>Title Text Left Aligned <span>Item Count Right Aligned</span> 
    <element></element> 
    <element></element> 
    <element></element> 
</div>

來源

2011-07-16 Darin

我使用Chrome的最新穩定/發佈版本，如果這很重要。 – Darin

「我正在使用Chrome瀏覽器」不，那應該不重要。您的CSS應該適用於所有[現代瀏覽器]（http://browsehappy.com/）。 – feeela

是標題欄或待擴展窗口的<element></element>一部分？

我認爲你應該爲每個整個窗口DIV和單獨DIV的標題和內容。 如果標題中的右對齊元素是最不明顯的，則SPAN的float: right;可能就足夠了。

<div class="window"> 
    <div class="title_bar"> 
     <!-- left aligned title bar elements --> 
     <span style="float: right;"> 
      <!-- item count --> 
     </span> 
    </div> 
    <div class="window_content"> 
     <!-- window-contents --> 
    </div> 
</div>

否則，可能會得到position: relative;（沒有top或給出任何其它的距離）的標題欄元素。然後，您可以絕對地使用SPAN（使用position: absolute; right: 0; top: 0;）。

來源

2011-07-16 23:01:22 feeela

我也會使用div來計算物品數量，因爲float無論如何都會將元素轉換爲塊。另外我會讓.window_content清除浮動，以防萬一。並且你實際上沒有顯示任何正在使用CSS的類... – Neil

@Neil「你沒有顯示任何正在使用的類」我的意圖只是顯示一個HTML示例，而不是整個窗口的工作實現。這些類只是添加，以查看哪些部分是用於什麼用途。 – feeela

@feeela - 如果按照我的方式進行佈局，則每個父DIV周圍可以有一個連續的邊框，因此它看起來就像是該特定組的封閉框。如果我按照自己的方式做了這件事，我會如何保持封閉的盒子外觀？ – Darin

跨度粘貼到頂部的CSS div？

回答

相關問題