跨越顶部的CSS div？

Question

我还是CSS的新手，但我一直试图在几天内找到这个问题的答案，而我却无法点击正确的网站或搜索短语来发现信息。或者我只是没有得到我正在读的东西。

我想要的是在DIV顶部有一个标题栏。我将为这个DIV提供一些子元素，然后是一个或多个DIV。插入彼此之后。这些标题栏DIV也将用于折叠和展开以隐藏和展示他们的孩子，如果这有任何区别。

我如何使用CSS类？比如class =“titleDiv”那么

.titleDiv {   文字：左对齐;   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>

Answer 1

<element></element>是标题栏还是待展开窗口的一部分？

我认为你应该为每个整个窗口DIV，并为标题和内容分别DIV。 如果标题中的右对齐元素是最不重要的，则float: right;的{​​{1}}可能已足够。

SPAN

否则，您可以向title-bar-element提供<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）。