1

我在父 div 中有 3 个 div，如下所示：

<div id="maincontent>
  <div class="left"></div>
  <div class="mainbody"></div>
  <div class="right"></div>
</div>

该网站的宽度为 1000 像素。

我需要将.mainbodydiv 保持在至少 570 像素，但如果从页面中删除其他 2 个 div 之一，则使其扩展，每个 div 的宽度均为 215 像素。

所有 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;
}
4

2 回答 2

2

仅 CSS 解决方案 1

这假设问题在说明“是否从页面中删除其他 2 个 div 之一”时是准确的。

请参阅使用以下代码的这个小提琴，其中的关键部分是基于您提到的 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 解决方案 2

这占了div其余的，但没有内容并且宽度为零（这显然是实际情况）。

有一个纯 CSS 的解决方案（参见这个小提琴），但它需要重新构建元素的 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;
}
于 2013-03-29T13:32:15.967 回答
1

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

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

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

于 2013-03-29T13:23:39.300 回答