Question

我遇到height问题但对我不起作用。

我希望白色块位于灰色内，但不是。

我希望你回答我错误的是，白色块不在灰色块内。

CSS：

#main-block {
    background:#eee;
    height:auto;
    padding:20px;
    border-radius:5px;
    box-shadow:0px 0px 5px #888;
    -webkit-box-shadow:0px 0px 5px #888;
    -moz-box-shadow:0px 0px 5px #888;
    -o-box-shadow:0px 0px 5px #888;
    -ms-box-shadow:0px 0px 5px #888;
    margin-top:10px;
}
.right-blocks {
    width:175px;
}
.right-blocks article {
    background: url(http://www.hotup.ir/upload/50n_b-top.png) no-repeat top;
    height:62px;
    width:175px;
    padding:9px;
}
.right-blocks article header {
    font-size:13px;
    overflow: hidden;
    text-align:left;
    margin-left:5px;
    margin-top:2px;
    color:#030434;
    text-shadow:0px 0px 5px #0a3687;
    -webkit-text-shadow:0px 0px 5px #0a3687;
    -ms-text-shadow:0px 0px 5px #0a3687;
    -o-text-shadow:0px 0px 5px #0a3687;
    -moz-text-shadow:0px 0px 5px #0a3687;
}
.right-blocks article figure {
    font-size:14px;
    overflow: hidden;
    margin-right:10px;
    margin-top:60px;
    color:#333;
}
.right-blocks article .b-main {
    background: url(http://www.hotup.ir/upload/crqy_b-main.png) repeat-y bottom;
    margin-top:-7px;
}
.right-blocks article footer {
    background: url(http://www.hotup.ir/upload/2623_b-bottom.png) no-repeat bottom;
    overflow: hidden;
    height:5px;
    margin-top: -14px;
}

HTML：

<section id="main-block">
    <div class="right-blocks">
        <article>
            <header></header>
            <div class="b-main">
                <figure><br /><br /><br /><br /><br /><br /><br /><br /><br /></figure>
            </div>
            <footer>
                <br /><br />
            </footer>
        </article>
    </div>

</section>

Answer 1

从height: 62px; css块中取出.right-blocks article。

像这样：http://jsfiddle.net/d5HZJ/

Answer 2

你应该从.right-blocks文章中删除高度：62px。您甚至可以删除：

.right-blocks {
width:175px;
}

它什么也没做。

高度：自动无效

2 个答案: