Question

我在空DIV中创建了两个DIV，并为其分配了浮点数。页面的描述和布局显示为here。

HTML：

    <div id="new_div">
        <div class="home">
            <h3 class="featurework">Header</h3>
            <h4 class="featureworktitle">Sub-header</h4>
            <img class="featureworkimg" src="img/featured-rms.jpg" alt="lilo">
        </div>

        <div class="home-description">
            <p class="home">Description section</p>
            <p class="home-viewproject"><a href="#" target="_blank">Link &raquo;</a></p>
        </div>
    </div>

CSS：

#new_div {
    width: 100%;
}

div.home {
    width: 50%;
    float:left;
    background:#1ABC9C;
}

div.home-description {
    width: 50%;
    float:left;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    display: -webkit-box;
    display:box;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    background:#1ABC9C;
    padding:180px 0 0 0;
}

Div class home和home-description向左浮动，宽度为50％。我的问题是home-description div没有延伸到前面声明的div的高度。我知道有一个很大的问题就是其他网络开发者在互联网上流传着类似的问题来解决这个问题。他们中的大多数已设法解决问题，因为他们的内容只有1列。与他们不同的是，我的左边是两列。

请查看上面提供的链接以获得更好的说明。

垂直拉伸浮动div

0 个答案: