HTML divs，如何包装内容？ [英] HTML divs, how to wrap content?

问题描述

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; 
保证金：0; 
 width：300px; 
 min-height：198px; 
} 
 
 .col-right {
 text-align：left; 
 padding：0; 
保证金：0 0 0 200px; 
} 
 
 #content {
背景：无重复滚动0 0 #FFFFFF; 
 float：left; 
 margin-top：10px; 
 padding：10px; 
 width：980px; 
} 
  

这是 JSFiddle演示

解决方案

，你将不得不使用Javascript。

我会首先在第一张图片上创建一个页面。
然后我会使用

$ p $ $ $ $ $$ div $ height $（
$ / code>

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

  if（$（＃div1）。height（）> $（div2）。height（））
 //改变网站... 
  

在if体内放置所需的css更改...这应该可以实现。

I have 3 div's like on this image:

div1 has fixed width but variable height, so what I would like is that if div1 height is bigger that the div2 height, the div3 stays under div2 and on the right of the div1, like here:

Any idea on how to do this? For the moment, I have created a container:

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

My CSS is like this:

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

Here is the JSFiddle demo

解决方案

As CSS doesn't provide anything for that job yet, you will have to use Javascript.

I would firstly create a page like on your first picture. Then I would use

$("#div").height()

, which returns the height of your div and compare this to your second div's height:

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

In the if body put the required css changes... That should do the trick.

这篇关于HTML divs，如何包装内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！