我在这张图片上有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;
}
答案 0 :(得分:6)
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)
});
答案 1 :(得分:4)
由于CSS尚未为该作业提供任何内容,因此您必须使用Javascript。
我首先要在你的第一张照片上创建一个页面。 然后我会用
$("#div").height()
,返回div的高度并将其与第二个div的高度进行比较:
if($("#div1").height() > $("div2").height())
//change website...
在if体中放置所需的css更改......这应该可以解决问题。
答案 2 :(得分:4)
如果你像这样设置#content
,那么它就可以了。
#content {
background: #fbb;
padding: 10px;
}
注意没有浮动。
jsFiddle:http://jsfiddle.net/JRbFy/1/
jsFiddle具有相同高度的左列和内容效果:http://jsfiddle.net/JRbFy/2/
答案 3 :(得分:2)
如果我理解得合适,你想要这样的东西吗?
<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>
答案 4 :(得分:2)
这应该对你有用,至少指出你正确的方向。
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>
答案 5 :(得分:2)
最后我的解决方案也来了:)
演示: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;
}
希望有所帮助
答案 6 :(得分:0)
看到每个人都是juuuuuuurves,我决定把一些东西放在一起,实际上就是你所要求的。玩得开心:))
<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查看。只需添加一个&lt; p&gt; Test&lt; / p&gt;到div1,你会看到div3然后根据你的图像到达div1的右边。
现在,我知道有人会说“但是div1并没有占据所有的高度!”,不要害怕。检查updated jsFiddle,添加一个javascript补丁,看看你的问题也得到了解答。只需删除其中一个&lt; p&gt; Test&lt; / p&gt;来自div1。
$(function () {
$('#div2').css({
marginLeft: $('#div1').outerWidth()
});
if ($('#div2').height() < $('#div1').height()) {
$('#div3').css({
marginLeft: $('#div1').outerWidth()
});
$('#div1').css({
height: $('#div2').outerHeight() + $('#div3').height()
});
}
});
我必须重申,此解决方案依赖于Javascript。关闭它,设备不支持它,这将停止工作。
答案 7 :(得分:0)
不一定回答这个问题,但我想你可能想知道在CSS 3中你可以使用这种风格 - {word-wrap:break-word;} - 在div中放入一个长字符串。
答案 8 :(得分:0)
我可能错过了阅读这个问题但是没有你想要的所需布局。
https://jsfiddle.net/94ohw4hq/
<div id="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>
答案 9 :(得分:-3)
使用
wookmark插件
解决您的问题