Question

我有问题。我按照指示对这些div做出了响应 another topic here

它工作正常，但我想垂直对齐第二个div中的黑色div而不是“流行”div。

我无法垂直对齐底部，因为这些框的高度不会有相同的高度（在列表中将有超过3件事）。所以你有什么建议？

HTML

    <div class="wrapper">
    <div class="website-pricing">
        <div class="website-pricing-top" style="border-radius: 10px 10px 0px 0px; !important cursor:pointer;" onclick="window.location='#';     padding-top:5px; !important">
            <!--#333333-->
            <!--top div-->
             <h2 style="color:#FFFFFF;"><br><center>Header <br>1</center></h2>
 <span class="website-pricing-top-details-mid" style="color:#24FF00;">
      <!--details mid-->
    </span>

            <p class="website-pricing-top-details-bot">
                <!--details bot-->Details details details</p>
        </div>
        <div class="website-pricing-bot">
            <!--#F7F7F7-->
            <!--bot div-->
            <ul class="pricing-list-ul" style="margin:0; padding:20px;">
                <li class="pricing-list-li" style="padding:10px;">first</li>
                <li class="pricing-list-li" style="margin:0; padding:10px;">second</li>
                <li class="pricing-list-li">third</li>
            </ul>
            <div class="pricing-bot-banner-details" style="padding:2px;  height:50px; background:#89C02A; border-radius: 0px 0px 10px 10px; cursor:pointer; onclick= window.location='#'" ;>
                <p style="text-align:center; color:black;"><b>more</b>

                </p>
            </div>
        </div>
    </div>
    <div class="website-pricing">
        <div class="website-prising-popular" style="min-height:50px height:50px">
            <!--popular #77338A / white font or #89C02A / black font-->Popular</div>
        <div class="website-pricing-top" style="border-radius:0px 0px 0px 0px; cursor:pointer;" onclick="window.location='http://www.blb.gr/kostologisi/web-site-static-build';">
            <!--#333333-->
            <!--top div-->
                <h2 style="color:#FFFFFF;"><br><center>Header <br>1</center></h2>
 <span class="website-pricing-top-details-mid" style="color:#24FF00;">
      <!--details mid-->
    </span>

            <p class="website-pricing-top-details-bot">
                <!--details bot-->Details details details</p>
        </div>
        <div class="website-pricing-bot">
            <!--#F7F7F7-->
            <!--bot div-->
            <ul class="pricing-list-ul" style="margin:0; padding:20px;">
                <li class="pricing-list-li" style="padding:10px;">first</li>
                <li class="pricing-list-li" style="margin:0; padding:10px;">second</li>
                <li class="pricing-list-li">third</li>
            </ul>
            <div class="pricing-bot-banner-details" style="padding:2px;  height:50px; background:#89C02A; border-radius: 0px 0px 10px 10px; cursor:pointer; onclick= window.location='#'" ;>
                <p style="text-align:center; color:black;"><b>more</b>

                </p>
            </div>
        </div>
    </div>
    <div class="website-pricing">
        <div class="website-pricing-top" style="border-radius: 10px 10px 0px 0px; cursor:pointer;" onclick="window.location='#';">
            <!--#333333-->
            <!--top div-->
             <h2 style="color:#FFFFFF;"><br><center>Header <br>1</center></h2>
 <span class="website-pricing-top-details-mid" style="color:#24FF00;">
      <!--details mid-->
    </span>

            <p class="website-pricing-top-details-bot">
                <!--details bot-->Details details details</p>
        </div>
        <div class="website-pricing-bot">
            <!--#F7F7F7-->
            <!--bot div-->
            <ul class="pricing-list-ul" style="margin:0; padding:20px;">
                <li class="pricing-list-li" style="padding:10px;">first</li>
                <li class="pricing-list-li" style="margin:0; padding:10px;">second</li>
                <li class="pricing-list-li">third</li>
            </ul>
            <div class="pricing-bot-banner-details" style="padding:2px;  height:50px; background:#89C02A; border-radius: 0px 0px 10px 10px; cursor:pointer; onclick= window.location='#'" ;>
                <p style="text-align:center; color:black;"><b>more</b>

                </p>
            </div>
        </div>
    </div>

CSS

    .wrapper {
    border : 0px;
    overflow:hidden;
}
.wrapper div {
    min-height: 50px;
}
.website-pricing {
    float:left;
    overflow:hidden;
    margin-right:70px;
    margin-bottom:50px;
    min-height:200px;
    min-width:200px;
    max-width:25%;
    font-size:0.8em;
}
.website-prising-popular {
    width:100%;
    position:relative;
    color:white;
    background-color:#89C02A;
    font-style:uppercase;
    font-size:1em;
    text-align:center;
    border-radius: 10px 10px 0px 0px;
    margin:0 0 5 0 px;
    padding:3 0 3 0;
    margin-bottom:0px;
}
.website-pricing-top {
    margin-top:0px;
    padding-bottom:5px;
    width:100%;
    color:white;
    background-color:#1C1C1C;
    text-align:center;
    border-radius: 10px 10px 0px 0px;
    margin:0px;
}
.website-pricing-top-details-mid {
    width:100%;
    font-size:3em;
}
.website-pricing-bot {
    width:100%;
    position:relative;
    background-color:#F7F7F7;
    color:black;
    border-radius: 0px 0px 10px 10px;
    font-size:12px;
    min-height: auto;
    height:auto;
}
.pricing-list-ul {
    list-style:none;
    margin:0;
    padding:20px;
}
.pricing-list-li {
    padding:10px;
}
@media screen and (max-width: 400px) {
    #website-pricing {
        float: none;
        margin-right:0;
        width:auto;
        height:auto;
        border:0;
    }
}

fiddle

提前谢谢。

Answer 1

我会尝试这样做：

http://jsfiddle.net/7yexw8uf/2/

使用：

 position:absolute;

对于.website-prizing-流行然后添加位置：相对，不溢出：隐藏到.website-pricing并给予它们与＆＃34;流行＆＃34;相同的margin-top;负顶值）

Answer 2

我做了@AlvaroMenéndez说的溢出和位置。我还给.website-pricing提供了内联负的margin-top值，并添加了overflow：hidden; min和max-width到.wrapper div并且它工作正常。

我更新了jsfiddle 如果有人有兴趣。

这是新的CSS：

.wrapper {
    border : 0px;
    overflow:hidden;
}
.wrapper div {
    min-height: 20px;
    overflow:hidden;
    min-width:200px;
    max-width:25%;
}
.website-pricing {
    posotion:relative;
    float:left;
    margin-right:70px;
    margin-bottom:50px;
    min-height:200px;
    font-size:0.8em;
}
.website-prising-popular {
    width:100%;
    position:absolute;
    color:white;
    background-color:#89C02A;
    font-style:uppercase;
    font-size:1em;
    text-align:center;
    border-radius: 10px 10px 0px 0px;
    margin:0 0 5 0 px;
    padding:3 0 3 0;
    margin-bottom:0px;
    width:200px;
}
.website-pricing-top {
    margin-top:0px;
    padding-bottom:5px;
    width:100%;
    color:white;
    background-color:#1C1C1C;
    text-align:center;
    border-radius: 10px 10px 0px 0px;
    margin:0px;
}
.website-pricing-top-details-mid {
    width:100%;
    font-size:3em;
}
.website-pricing-bot {
    width:100%;
    position:relative;
    background-color:#F7F7F7;
    color:black;
    border-radius: 0px 0px 10px 10px;
    font-size:12px;
    min-height: auto;
    height:auto;
}
.pricing-list-ul {
    list-style:none;
    margin:0;
    padding:20px;
}
.pricing-list-li {
    padding:10px;
}
@media screen and (max-width: 400px) {
    #website-pricing {
        float: none;
        margin-right:0;
        width:auto;
        height:auto;
        border:0;
    }
}

使用css查询的三个div中具有最小高度的不同上边距（响应）

2 个答案: