HTML divs，如何包装内容？

enter image description here

DIV1有固定的宽度，但高度可变的，所以我想的是，如果DIV1高度较大的DIV2高度，下DIV2的DIV3住宿并在DIV1的权利，喜欢这里：

enter image description here

如何做到这一点任何想法？就目前而言，我创建了一个容器：

<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

来源

2013-02-19 Miloš

你前面的问题的链接可能是有用的人[http://stackoverflow.com/questions/14954311/how-to-create-a-specific-layout-in-html ]（http://stackoverflow.com/questions/14954311/how-to-create-a-specific-layout-in-html） – Wez 2013-02-19 16:35:59

@Milos你能解释一下div1的高度是如何改变的吗？ – 2013-02-19 17:00:30

@Mr_Green，事实上，div1具有由css定义的最小高度，但如果div中有更多数据，dif高度将自动增加。 – 2013-02-19 17:01:31

由于CSS不提供这项工作做任何事，你将不得不使用JavaScript。

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

$("#div").height()

，返回你的DIV的高度和比较这对你的第二个div的高度：

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

在身，如果把需要的CSS改变...这应该做的伎俩。

来源

2013-02-19 16:53:40 ltsstar

谢谢@ltsstar，但您确定没有CSS/HTML解决方案吗？ – 2013-02-19 16:56:37

它*可以*用CSS完成...... – 2013-02-22 10:32:20

首先。当第二个内容较短时，第一个图像失败时，这不会实现浮动在第一个右侧的第三个区域。其次，我不敢相信你为了两列布局而付出了所有的努力！ – Rafe 2013-03-03 05:45:48

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

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

来源

2013-02-19 16:48:05

@Milos嗯，我已经给你一个演示，可以证明我只有css是多么接近。请尝试演示以获得您的结果。我相信我错过了一些愚蠢的东西在CSS中使用。 – 2013-02-19 16:53:53

自从这个问题发生以来，我一直在尝试。我无法用纯CSS获得它。也许在像SASS之类的帮助下，但除了标准的CSS3之外，这是不可能的。我的小提琴：http://jsfiddle.net/n8N59/ – Michael 2013-02-19 16:58:04

我的领主似乎有很多人试图在这里使用js。 Js并不总是可用的。 JS从来不是解决这种情况的方法！ – Rafe 2013-03-03 05:31:48

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

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

来源

2013-02-19 17:03:00 solusipse

如果你喜欢这样#content它的作品。

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

注意没有浮动。

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

的jsfiddle与高度相等左柱和内容效果：http://jsfiddle.net/JRbFy/2/

来源

2013-02-19 17:03:38

似乎JSFiddle正常工作，我必须在我的项目上测试这个。非常感谢您 – 2013-02-19 17:06:58

更新了同样的高度'＃content'和'.col-left'版本。 :) – 2013-02-19 17:10:16

这应该为你工作，至少指点你在正确的方向。

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>

来源

2013-02-19 17:07:42 Nexcius

最后我的解决方案来得太:)

演示：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; 
}

希望帮助

来源

2013-02-19 17:24:19

看到大家都luuuuuuurves 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添加一个< p>测试</p>，您将看到div3会根据您的图像进入div1的右侧。

现在，我知道有人会说“但是div1并没有占用所有的高度！”，不用担心。查看updated jsFiddle，并在javascript中添加一条，以查看您的问题。只需从div1中删除其中一个< p> Test </p>。我不得不重申，这个解决方案依赖于Javascript。关掉它，设备不支持它，这停止工作。

来源

2013-03-03 07:06:56 Rafe

-2

使用

wookmark插件

解决您的问题

来源

2013-11-29 05:37:43

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

来源

2016-03-18 15:12:10

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

https://jsfiddle.net/94ohw4hq/

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

来源

2016-04-12 15:12:16 05beckga

HTML divs，如何包装内容？

回答

相关问题