我的代码在这里:http://jsfiddle.net/u9BsD/2/
您将看到第二部分 #indoorRange 正在应用最后一个子项,将最后一个框向右推,并将宽度增加 1%。第一部分 #membership 完全相同,但有三个 block ,但最后一个子类不会影响它应该影响的元素。是否有一些我不知道的关于最后一个 child 规则的规则?
感谢您的帮助。
<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;
}
最佳答案
删除 <div class="cl"></div>
从 HTML 中添加 #indoorRange { clear: both; }
到 css,我相信这可以解决问题。
由于 <div class="cl">
,样式未应用于最后一个成员(member) greyHeading元素它实际上不是最后一个 child 。
EDIT2:我对应用样式的 cl div 的看法是正确的,您可以使用 last-of-type
伪选择器也可以实现你想要的,不幸的是我不知道浏览器支持是什么样的。
有关更多信息,请参阅此 SO 问题:
CSS last-child selector: select last-element of specific class, not last child inside of parent?
关于css - 双重最后一个 child 的电话,一个有效,另一个无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14898631/