HTML div，如何包装内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14962459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML divs, how to wrap content?
提问by Milo?
I have 3 div's like on this image:
我在这张图片上有 3 个 div：
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:
div1 具有固定宽度但高度可变，所以我想要的是，如果 div1 高度大于 div2 高度，则 div3 保持在 div2 下方和 div1 的右侧，如下所示：
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:
我的 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;
}
Here is the JSFiddle demo
采纳答案by ltsstar
As CSS doesn't provide anything for that job yet, you will have to use Javascript.
由于 CSS 尚未为该工作提供任何内容，因此您将不得不使用 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:
，它返回您的 div 的高度并将其与您的第二个 div 的高度进行比较：
if($("#div1").height() > $("div2").height())
//change website...
In the if body put the required css changes... That should do the trick.
在 if 正文中放置所需的 css 更改...这应该可以解决问题。
回答by Mr_Green
Atlast, I got it :) Just wrap all those three elements in a parent element as shown below.
Atlast，我明白了:) 只需将所有这三个元素包装在一个父元素中，如下所示。
HTML
HTML
<div class="main">
<div class="div1"></div> <!-- Change height to see result -->
<div class="div2"></div>
<div class="div3"></div>
</div>
CSS
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;}
If you want to have the width of the third div to be wide from before itself then I highly recommend you to go with jQuery.
如果你想让第三个 div 的宽度比之前更宽，那么我强烈建议你使用 jQuery。
.div3{width:200px;} /* Keeping width wide enough with the container */
jQuery
jQuery
$(function(){
if($('.div1').height() > 100)
$('.div3').width(100)
});
回答by James Coyle
If you style the #contentlike this it works.
如果你#content像这样设计它的工作原理。
#content {
background: #fbb;
padding: 10px;
}
Notice there is no float.
注意没有浮动。
jsFiddle: http://jsfiddle.net/JRbFy/1/
jsFiddle：http: //jsfiddle.net/JRbFy/1/
jsFiddle with equal height left-column and content effect: http://jsfiddle.net/JRbFy/2/
jsFiddle 等高左列和内容效果：http: //jsfiddle.net/JRbFy/2/
回答by Nexcius
This should work for you, at least pointing you in the right direction.
这应该对你有用，至少为你指明了正确的方向。
CSS:
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：
<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>
回答by Andrea Ligios
And finally my solution comes too :)
最后我的解决方案也来了:)
Demo: http://jsfiddle.net/JRbFy/3/
演示：http: //jsfiddle.net/JRbFy/3/
Just using margin: 10px auto;, and taking the content divout of the main_content div:
只要使用margin: 10px auto;，并采取content div出来的main_content div：
HTML
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
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;
}
Hope that helps
希望有帮助
回答by solusipse
If i understood properly you want something like this?
如果我理解正确，你想要这样的东西吗？
<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>
回答by Rafe
Seeing as everyone luuuuuuurves jQuery, I decided to throw something together that actually does what you asked. Have fun :)
看到每个人都 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>
Throw in some css
扔一些css
#div1, #div2, #div3, #div4 {
border:3px double #000;
background:#fff
}
#div1 {
width:200px;
float:left;
}
#div4 {
clear:both;
}
And finally your jQuery.
最后是你的 jQuery。
$(function () {
$('#div2').css({
marginLeft: $('#div1').outerWidth()
});
if ($('#div2').height() < $('#div1').height()) {
$('#div3').css({
marginLeft: $('#div1').outerWidth()
});
}
});
Now. I am not advocating this method, just saying that it actually achieved what you asked for whereas nothing else here has ;)
现在。我不是在提倡这种方法，只是说它实际上实现了您的要求，而这里没有其他任何东西；）
See it at this jsFiddle. Simply add one more <p>Test</p> to div1 and you will see that div3 then goes to the right of div1 as per your image.
在这个 jsFiddle看到它。只需在 div1 中再添加一个 <p>Test</p>，您将看到 div3 然后按照您的图像移动到 div1 的右侧。
Now, I know someone will say "But div1 doesn't take all the height then!", well fear not. Check the updated jsFiddlewith one added piece to the javascript to see your questions answered too. Just delete one of the <p>Test</p> from div1.
现在，我知道有人会说“但是 div1 并没有占据所有的高度！”，不要害怕。检查更新的 jsFiddle，在 javascript 中添加一个部分，看看你的问题也得到了回答。只需从 div1 中删除 <p>Test</p> 之一。
$(function () {
$('#div2').css({
marginLeft: $('#div1').outerWidth()
});
if ($('#div2').height() < $('#div1').height()) {
$('#div3').css({
marginLeft: $('#div1').outerWidth()
});
$('#div1').css({
height: $('#div2').outerHeight() + $('#div3').height()
});
}
});
I have to reiterate that this solution relies on Javascript. Turn it off, device doesnt support it, this stops working.
我必须重申，这个解决方案依赖于 Javascript。关闭它，设备不支持它，这停止工作。
回答by Erik K.
Not necessarily answers the question, but I thought you might like to know that in CSS 3 you can use this style - {word-wrap: break-word;} - to fit a long string inside a div.
不一定回答这个问题，但我想你可能想知道在 CSS 3 中你可以使用这种样式 - {word-wrap: break-word;} - 在 div 中放入一个长字符串。
回答by 05beckga
I probably missed read the question but does this not have have the desired layout you wanted.
我可能错过了阅读问题，但这是否没有您想要的布局。
https://jsfiddle.net/94ohw4hq/
https://jsfiddle.net/94ohw4hq/
<div id="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>
回答by Muhammad Hassaan
Use
用
wookmark plugin
书签插件
to solve your problem
解决你的问题
