1

我在分配有浮点数的空 DIV 内创建了两个 DIV。页面的描述和布局显示在这里。

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 类home并home-description以 50% 的宽度向左浮动。我的问题是home-descriptiondiv 没有拉伸到之前声明的 div 的高度。我知道这在其他网络开发人员的互联网上流传着一个大问题，他们在解决这个问题时遇到了类似的问题。他们中的大多数人都设法解决了这个问题，因为他们的内容只有 1 列。与他们的不同，我的是向左浮动的 2 列。

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

4

0 回答 0