我在父div中有3个div,如下所示:
<div id="maincontent>
<div class="left"></div>
<div class="mainbody"></div>
<div class="right"></div>
</div>
该网站的宽度为1000px。
我需要的是保持.mainbody
div至少为570px,但如果从页面中删除其他2个div中的一个,则每个div都会扩展,每个div的宽度为215px。
所有3个div也向左浮动。
我尝试在min-width
上使用max-width
和.mainbody
,但它并没有真正起作用。还有其他想法吗?
我目前的CSS:
#maincontent {
width: 100%;
overflow: hidden;
}
.left, .right, .mainbody {
float: left;
}
.left, .right {
width: 215px;
}
.mainbody {
width: 570px;
}
答案 0 :(得分:2)
这假设问题在说明“是否从页面中删除了其他2个div之一。”
See this fiddle使用以下代码,其中关键部分是基于您提及的html结构更改的:first-child
和:last-child
更改。删除left
后,mainbody
成为first-child
,删除right
时,mainbody
成为last-child
,因此您重置width
如果发生这种情况。
关键CSS
.mainbody {
width: 570px;
float: left;
}
.mainbody:first-child,
.mainbody:last-child {
width: 785px;
}
.left,
.right {
width: 215px;
float: left;
}
这会导致剩余div
,但没有内容且宽度为零(显然情况实际上是这样)。
只有一个CSS解决方案(see this fiddle),但它需要重新构建元素的HTML顺序并调整它们的浮动方式。
需要的HTML结构(mainbody
是最后的)
<div id="maincontent1">
<div class="left"></div>
<div class="right"></div>
<div class="mainbody"></div>
</div>
关键CSS
.mainbody {
min-width: 570px;
overflow: hidden; /* this triggers expansion between left/right */
}
.left {
width: 215px; /* this is assumed to be zero if no content in div */
float: left;
}
.right {
width: 215px; /* this is assumed to be zero if no content in div */
float: right;
}
答案 1 :(得分:1)
只是广告和事件的功能。 .click(), .ready()
等
if($('.right').is(':visible') == false){
$('.mainbody').width(785+'px');
}
else{ }
或使用.size() / .length()