HTML div，如何包装内容？答案

【问题标题】：HTML divs, how to wrap content?HTML div，如何包装内容？
【发布时间】：2016-04-12 23:12:16
【问题描述】：

我在这张图片上有 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

【问题讨论】：

上一个问题的链接可能对其他人有用http://stackoverflow.com/questions/14954311/how-to-create-a-specific-layout-in-html
@Milos 你能解释一下 div1 的高度是如何改变的吗？
@Mr_Green，其实div1有css定义的最小高度，但是如果div中有更多数据，dif高度会自动增加。

标签： html css

【解决方案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

【讨论】：

@Milos 好吧，我给了你一个演示，它可以证明我是多么接近只有 css。请尝试该演示以获得您的结果。我确信我错过了一些在 css 中使用的愚蠢的东西。
自从提出这个问题以来，我一直在尝试。我无法用纯 CSS 得到它。也许在 SASS 之类的帮助下，但只有标准 CSS3 才能做到这一点。我的小提琴：jsfiddle.net/n8N59
我的主这里似乎有很多人在尝试使用js。 Js 并不总是可用的。 JS 从来都不是处理这种情况的方法！

【解决方案2】：

由于 CSS 还没有为这项工作提供任何东西，您将不得不使用 Javascript。

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

$("#div").height()

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

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

在 if 正文中放置所需的 css 更改...应该可以解决问题。

【讨论】：

谢谢@ltsstar，但你确定没有CSS / HTML解决方案吗？
首先。当第二个区域的内容较短时，这不会实现第三个区域浮动到第一个区域的右侧，因此第一个图像失败。第二。我不敢相信你为两列布局付出了所有努力！

【解决方案3】：

如果您像这样设置#content 的样式，它会起作用。

#content {
    background: #fbb;
    padding: 10px;
}

注意没有浮动。

jsFiddle：http://jsfiddle.net/JRbFy/1/

左列和内容效果等高的jsFiddle：http://jsfiddle.net/JRbFy/2/

【讨论】：

似乎在 JSFiddle 上运行良好，我必须在我的项目中测试它。非常感谢
更新了相同高度的#content 和.col-left 版本。 :)

【解决方案4】：

如果我理解正确，你想要这样的东西吗？

<style>
    #container1
    {
        width: 100%;
    }

    #left
    {
        width: 30%;
        background: #123456;
        float: left;
        height: 50%;
    }
    #right
    {
        width: 70%;
        float: left;
        height: 50%;
    }
    #right_top
    {
        background: #111111;
        height: 30%;
    }
    #right_bottom
    {
        background: #777777;
        height: 70%;
    }
</style>

<div id="container1">
    <div id="left">Div 1</div>
    <div id="right">
        <div id="right_top">Div 2</div>
        <div id="right_bottom">Div 3</div>
    </div>
</div>

【讨论】：

【解决方案5】：

这应该对您有用，至少可以为您指明正确的方向。

CSS：

.box {border:1px dashed black;}
#content {width:1000px;}
#clear {clear:both;}

#left {float:left; width:200px; height:100px; margin-right:15px;}
#top {float:left; width:780px; height:200px;}
#main {float:left; min-width:780px; max-width:1000px;}

HTML：

<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="box" id="content">
<div class="box" id="left">Left</div>
<div class="box" id="top">Top</div>
<div class="box" id="main">Main</div>
<div id="clear"></div>
</div>

</body>
</html>

【讨论】：

【解决方案6】：

最后我的解决方案也来了:)

演示：http://jsfiddle.net/JRbFy/3/

只需使用 margin: 10px auto; ，然后将 content div 从 main_content div 中取出：

HTML

<div class="colcontainer">
    <div class="col-left">
    {% block news %}{% endblock %}
        <br/>
        <b>Hover on me to increase my height </b>
    </div>  
    <div id="main_content">
        <div class="col-right">
            {% block rightcol %}{% endblock %}
        </div> 
    </div>
    <div id="content">
        <div class="contentwrap">
            <div class="itemwrap">
                {% block content %}{% endblock %}
            </div>
        </div>


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

CSS

.colcontainer{
    width: auto;
}

.col-left {
    background: none repeat scroll 0 0 silver;
    float:left;
    padding:0;
    margin:0;
    width: 300px;
    min-height:198px;
}

.col-left:hover{    
    height: 300px;
}

.col-right {
    background: none repeat scroll 0 0 steelblue;
    text-align:left;
    padding:0;
    margin:0 0 0 200px;
    height:198px;
}

#content {
    background: none repeat scroll 0 0 yellowgreen;    
    margin: 10px auto;
    padding: 10px;
}

希望对你有帮助

【讨论】：

【解决方案7】：

看到每个人都喜欢 jQuery，我决定把一些东西放在一起，实际上可以满足你的要求。玩得开心:)

<div id="div1">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>
<div id="div2">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>
<div id="div3">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>
<div id="div4">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>

添加一些 CSS

#div1, #div2, #div3, #div4 {
    border:3px double #000;
    background:#fff
}
#div1 {
    width:200px;
    float:left;
}
#div4 {
    clear:both;
}

最后是你的 jQuery。

$(function () {
    $('#div2').css({
        marginLeft: $('#div1').outerWidth()
    });
    if ($('#div2').height() < $('#div1').height()) {
        $('#div3').css({
            marginLeft: $('#div1').outerWidth()
        });
    }
});

现在。我不是在提倡这种方法，只是说它实际上实现了您的要求，而这里没有其他方法；）

查看this jsFiddle。只需在 div1 中再添加一个

Test

，您就会看到 div3 根据您的图像移动到 div1 的右侧。

现在，我知道有人会说“但是 div1 并没有占据所有的高度！”，不用担心。检查updated jsFiddle 并在 javascript 中添加一段，以查看您的问题也得到了解答。只需从 div1 中删除

Test

之一。

$(function () {
    $('#div2').css({
        marginLeft: $('#div1').outerWidth()
    });
    if ($('#div2').height() < $('#div1').height()) {
        $('#div3').css({
            marginLeft: $('#div1').outerWidth()
        });
        $('#div1').css({
            height: $('#div2').outerHeight() + $('#div3').height()
        });
    }
});

我必须重申，这个解决方案依赖于 Javascript。关闭它，设备不支持它，这停止工作。

【讨论】：

【解决方案8】：

不一定能回答问题，但我想您可能想知道在 CSS 3 中您可以使用这种样式 - {word-wrap: break-word;} - 将长字符串放入 div 中。

【讨论】：

【解决方案9】：

我可能错过了阅读该问题，但这没有您想要的布局。

https://jsfiddle.net/94ohw4hq/

<div id="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>

【讨论】：

【解决方案10】：

使用

书签插件

解决你的问题

【讨论】：