Получить плавающий div для вертикального выравнивания - PullRequest
Новая
       6

Получить плавающий div для вертикального выравнивания

1 голос
/ 17 августа 2011

Вот проблема, с которой я сталкиваюсь. Я пытаюсь заставить div появляться позади другого объекта и выравнивать его по центру.

Это то, что я до сих пор: http://jsfiddle.net/imoda/GYha2/

И вот результат, который я пытаюсь получить

enter image description here

Как видите, я рядом. Я просто не могу заставить его выровнять центр и расположиться позади другого объекта.

Есть мысли?

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 &amp; 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;
}

1 Ответ

3 голосов
/ 17 августа 2011

Существует два основных способа выравнивания по вертикали:

  1. Использование таблиц (с использованием реальных тегов HTML <table> или поддельных объявлений CSS display:table-cell)
  2. Используйте встроенные элементы (опять же, реальные HTML-элементы, которые естественным образом встроены, такие как <span>, или объявления CSS display:inline-block)

Вот обновленная скрипка , в которой от display:inline-block до приблизительно получим то, что вам нужно, я думаю. Обратите внимание, что я также переключил два элемента div в HTML.

Он также использует хак *display:inline; zoom:1;, чтобы заставить его работать с IE6 / 7

...