Question

我在父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;
}

Answer 1

CSS Only Solution 1

这假设问题在说明“是否从页面中删除了其他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;
}

CSS Only Solution 2

这会导致剩余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;
}

Answer 2

只是广告和事件的功能。 .click(), .ready()等

if($('.right').is(':visible') == false){ 
   $('.mainbody').width(785+'px'); 
}
else{ }

或使用.size() / .length()

在容器div中有3个div，如果另一个被取消，则使其中一个扩展

2 个答案:

CSS Only Solution 1

CSS Only Solution 2