跨度粘贴到顶部的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？

回答

相关问题