[英]Get floating div to vertical align
這是我面臨的挑戰。 我試圖讓一個 div 出現在另一個 object 后面並與它對齊。
到目前為止,這就是我要做的: http://jsfiddle.net/imoda/GYha2/
這就是我想要得到的結果
如你所見,我很接近。 我只是無法讓它對齊中心並與 position 本身在另一個 object 后面對齊。
有什么想法嗎?
HTML:
<div id="banner" class="grid_12">
<div class="bannerBgT"></div>
<div class="bannerBgY">
<div id="planPricingWrapper">
<div id="planPrices">
<div class="planPrice">
<div class="planPriceX"> </div>
<div class="planPriceR"></div>
<div class="clear"></div>
</div>
<div class="clear_10px"></div>
<div class="planPrice">
<div class="planPriceX"> </div>
<div class="planPriceR"></div>
<div class="clear"></div>
</div>
</div>
<div id="planPriceOptions">
<div class="planPriceOptionsBgT" id="supremacy"></div>
<div class="planPriceOptionsBgY" id="supremacy">
<div><img src="http://www.patientacquisitionsystem.com/images/plans/pricing_title_supremacy.png" width="183" height="27" alt="Supremacy" id="titleImg" /></div>
<img src="http://www.patientacquisitionsystem.com/images/plans/pricing_plan_supremacy.png" width="146" height="156" alt="" />
<div class="planFeatures"> <b>Includes Gold & Platinum Features Plus:</b>
<ul>
<li>Class 3 Rayhawk Design</li>
<li>Class 3 Content Management</li>
<li>Up to 6 Content Modules</li>
<li>Inclusion in 2 or more directories/portals</li>
<li>Access to Rayhawk brand management services*</li>
<li>Mobile device enabled educational content/videos</li>
<li>Marketing materials deployment system*^</li>
<li>2 hours per month of additional services</li>
</ul>
</div>
</div>
<div class="planPriceOptionsBgB" id="supremacy"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="bannerBgB"></div>
</div>
CSS:
#planPricingWrapper {
padding: 20px;
}
#planPrices {
float: right;
}
#planPrices * {
z-index: 1;
}
.planPrice > * {
float: left;
}
.planPriceX {
width: 280px;
height: 131px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_x.png) repeat-x;
}
.planPriceR {
width: 11px;
height: 131px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_r.png) no-repeat;
}
#planPriceOptions {
z-index: 9999999;
}
.planPriceOptionsBgT, .planPriceOptionsBgB {
width: 614px;
}
.planPriceOptionsBgT#supremacy, .planPriceOptionsBgY#supremacy, .planPriceOptionsBgB#supremacy {
background-color: #181818;
}
.planPriceOptionsBgT {
height: 10px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_t.png) no-repeat;
}
.planPriceOptionsBgY {
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_y.png) repeat-y;
color: #FFF;
text-align: center;
padding: 20px;
width: 574px;
min-height: 250px;
}
.planPriceOptionsBgY #titleImg {
margin-bottom: 10px;
}
.planPriceOptionsBgB {
height: 12px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_b.png) no-repeat;
}
.planFeatures {
display: inline-block;
vertical-align: top;
font-size: 14px;
text-align: left;
list-style: square;
margin-left: 10px;
}
.planFeatures ul {
list-style: square;
}
垂直對齊基本上有兩種方法:
<table>
標簽或偽造的 CSS display:table-cell
聲明)<span>
或 CSS display:inline-block
聲明) 這是一個更新的小提琴,它使用display:inline-block
來大致得到你想要的東西,我想。 請注意,我還翻轉了 HTML 中的兩個 div。
它還使用*display:inline; zoom:1;
*display:inline; zoom:1;
破解以使其與 IE6/7 一起使用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.