HTML divs,如何包装内容？

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演示

Answer 1

Atlast,我明白了:)只需将这三个元素包装在父元素中,如下所示.

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;}

工作小提琴

如果你想让第三个div的宽度比之前宽,那么我强烈建议你使用jQuery.

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

jQuery的

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

工作小提琴

Answer 2

由于 CSS 尚未为该工作提供任何内容，因此您必须使用 Javascript。

我首先会创建一个像您的第一张图片一样的页面。然后我会用

$("#div").height()

，它返回 div 的高度并将其与第二个 div 的高度进行比较：

if($("#div1").height() > $("div2").height())
  //change website...

在 if 主体中放入所需的 css 更改...这应该可以解决问题。