0

私はここに私のコードを持っています: http://jsfiddle.net/u9BsD/2/

2 番目のセクション #indoorRange が表示され、最後の子が適用され、最後のボックスが右に押し出され、幅が 1% 拡張されます。最初のセクション #membership はまったく同じですが、3 つのブロックがありますが、最後の子クラスが要素に影響を与えていません。私が認識していない最後の子ルールに関するルールはありますか?

ご協力ありがとうございました。

<div id="memberships">
<div class="greyHeading">
    <header>
         <h3>Individual Membership:</h3>

    </header>
    <p>$175.00</p>
</div>
<div class="greyHeading">
    <header>
         <h3>Family Membership:</h3>

    </header>
    <p>$200.00 (Includes spouse and children under 21)</p>
</div>
<div class="greyHeading">
    <header>
         <h3>Red, White and Blue Discounts:</h3>

    </header>
    <p>Active LE, military, and 1st responders: 1/2 price membership discount!</p>
    <p>Retired LE, military and 1st responders 25% discount on membership!</p>
</div>
<div class="cl"></div>
</div>
<div id="indoorRange">
<div class="greyHeading">
    <header>
         <h3>Range Fees</h3>

    </header>
    <p>The range fees are per session. A "session" is defined as a visit to Allen
        Arms Indoor Shooting Range. We reserve the right to limit sessions to one
        hour if other customers are waiting for lanes.</p>
    <p>All lanes limited to two shooters unless special permission is obtained
        in advance.</p>
</div>
<div class="greyHeading">
    <header>
         <h3>Single Session</h3>

    </header>
    <ul>
        <li>One Adult Shooter: $10.00</li>
        <li>Two Adult Shooters on Same Lane: $7.50 Each</li>
        <li>Children under 18 with paying adult guardian: Free</li>
    </ul>
</div>
<div class="greyHeading">
    <header>
         <h3>Ladies Day</h3>

    </header>
    <p>Every Wednesday is Ladies Day! Women shoot for $5.00. Additionally, women
        receive 20% off range memberships.</p>
</div>
<div class="greyHeading">
    <header>
         <h3>Red White and Blue Discounts</h3>

    </header>
    <p>Law Enforcement, Active Duty Military, First Responders, and Security
        personnel pay only $5.00 per session any time, and receive 50% discount
        on memberships!</p>
</div>
</div>


#memberships .greyHeading {
float: left;
width: 32%;
margin: 0 1% 0 0;
}
#memberships .greyHeading:last-child {
float: right;
margin: 0;
width: 33%;
}
#memberships .greyHeading header {
background: #666;
margin: 0 0 10px 0;
}
#memberships .greyHeading header h3 {
color: #fff;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
line-height: 25px;
margin: 0;
padding: 5px 0 1px 5px;
}
#indoorRange .greyHeading {
float: left;
width: 24%;
margin: 0 1% 0 0;
}
#indoorRange .greyHeading:last-child {
float: right;
margin: 0;
width: 25%;
}
#indoorRange .greyHeading header {
background: #666;
margin: 0 0 10px 0;
height: 55px;
}
#indoorRange .greyHeading header h3 {
color: #fff;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
line-height: 25px;
margin: 0;
padding: 5px 0 1px 5px;
}
4

2 に答える 2

2

HTMLから削除してcssに<div class="cl"></div>追加すると、これで修正されると思います。#indoorRange { clear: both; }

<div class="cl">要素が実際には最後の子ではなかったため、スタイリングは最後のメンバーシップ grayHeading に適用されませんでした。

編集：証明のためのフィドル

EDIT2：スタイルが適用されたcl divについては正しかったです。last-of-type疑似セレクターを使用して、必要なものを実現できる場合もあります。残念ながら、ブラウザーのサポートがどのようなものかわかりません。

詳細については、この SO の質問を参照してください。

CSSの最後の子セレクター:親の最後の子ではなく、特定のクラスの最後の要素を選択しますか?

于 2013-02-15T16:56:53.240 に答える
0

:last-child が機能しない理由を解決しないため、これは最も理想的な答えではありません。ただし、これは私にとってはうまくいき、適切な解決策になる可能性があります。

私がしたことは、last-child の使用から nth-child の使用に切り替えることだけでした。したがって、これら2つの特定のクラスが変更されます...また、背景色を追加して、ここにあるjsfiddleで動作していることをより視覚的に明らかにしました: http://jsfiddle.net/u9BsD/3/

#memberships .greyHeading:nth-child(3) {
    float: right;
    margin: 0;
    width: 33%;
    background: red;
}

#indoorRange .greyHeading:nth-child(4) {
    float: right;
    margin: 0;
    width: 25%;
    background: blue;
}
于 2013-02-15T16:49:49.353 に答える