HTML div，如何包装内容？

Question

我在这张图片上有 3 个 div:

div1 的宽度固定但高度可变，所以我想要的是，如果 div1 的高度大于 div2 的高度，则 div3 保持在 div2 下方和 div1 的右侧，如下所示:

知道如何做到这一点吗？目前，我已经创建了一个容器:

<div class="colcontainer">
    <div class="col-left">
    {% block news %}{% endblock %}
    </div>  
    <div id="main_content">
        <div class="col-right">
            {% block rightcol %}{% endblock %}
        </div> 
        <div id="content">
            <div class="contentwrap">
                <div class="itemwrap">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

    <div class="content-bottom"><div class="content-bottom-left"></div></div>
    </div>
</div>

我的 CSS 是这样的:

.col-left {
    float:left;
    padding:0;
    margin:0;
    width: 300px;
    min-height:198px;
}

.col-right {
    text-align:left;
    padding:0;
    margin:0 0 0 200px;
}

#content {
    background: none repeat scroll 0 0 #FFFFFF;
    float: left;
    margin-top: 10px;
    padding: 10px;
    width: 980px;
}

这是 JSFiddle demo

Answer 1

最后，我明白了 :) 只需将所有这三个元素包装在一个父元素中，如下所示。

HTML

<div class="main">
   <div class="div1"></div>  <!-- Change height to see result -->
   <div class="div2"></div>
   <div class="div3"></div>
</div>

CSS

.main{width:200px;height:200px;border:1px solid black;overflow:hidden;}
.div1{width:100px;min-height:100px;float:left;background-color:green;}
.div2{width:100px;display:inline-block;height:100px;background-color:blue;}
.div3{width:100px;display:inline-block;height:100px;background-color:red;margin-top:-4px;}

Working fiddle

如果你想让第三个 div 的宽度比它本身更宽，那么我强烈建议你使用 jQuery。

.div3{width:200px;}  /* Keeping width wide enough with the container */

---

jQuery

$(function(){
    if($('.div1').height() > 100)
       $('.div3').width(100)
});

Working Fiddle