上部に貼り付けられたスパンを含むCSS div？

Question

私はまだCSSを初めて使い慣れていますが、私はこの問題の解決策を数日前から探しています。正しいサイトや検索フレーズで情報を公開することはできません。あるいは、私が読んでいるものが得られないだけです。

私が望むのは、DIVの上部にタイトルバーのようにすることです。私はこのDIVの子要素である要素をいくつか持っていき、その後に1つ以上のDIVsを挿入します。これらのタイトルバーのDIVは、崩壊して展開して子供たちを隠して見せてくれる場合にも使用されます。

CSSクラスでどうすればいいですか？同様にclass = "titleDiv"のようになります。

.titleDiv { テキスト：左揃え; スパン：右揃え。 }

<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を分けてください。 のタイトルがの場合、と表示されている場合、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> 

それ以外の、あなたはタイトルバー要素に（topまたは与えられた任意の他の距離なし）position: relative;を与える可能性があります。その後、SPANを絶対的に（position: absolute; right: 0; top: 0;を使用して）配置することができます。