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

I have 3 divs in a parent div which looks like this:

我在父div中有3个div,看起来像这样:

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

The website is 1000px wide.

该网站的宽度为1000px。

What I need is to keep the .mainbody div at a minimum of 570px, but have it expand if one of the other 2 divs is removed from the page, which are each given 215px width.

我需要的是保持.mainbody div至少为570px,但如果从页面中删除其他2个div之一,则每个div都会扩展,每个div的宽度为215px。

All 3 divs are also floated left.

所有3个div也向左浮动。

I tried using min-width and max-width on .mainbody but it doesn't really work. Any other ideas?

我尝试在.mainbody上使用min-width和max-width,但它确实不起作用。还有其他想法吗?

My current CSS:

我目前的CSS:

#maincontent {

  width: 100%;
  overflow: hidden;
}

.left, .right, .mainbody {

  float: left;
}

.left, .right {

  width: 215px;
}

.mainbody {

  width: 570px;
}

2 个解决方案

#1

Just ad and event to the function. .click(), .ready() etc

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

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

or use .size() / .length()

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

#2

CSS Only Solution 1

This assumes the question was accurate in stating "if one of the other 2 divs is removed from the page."

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

See this fiddle which uses the following code, the key part of which is the :first-child and :last-child change based off your html structure change that you mention. When the left is deleted, the mainbody becomes the first-child and when the right is deleted the mainbody becomes the last-child, so you reset the width if such occurs.

看到这个使用以下代码的小提琴,其中关键部分是:first-child和:last-child change基于您提到的html结构更改。删除左侧时,主体成为第一个子节点,当右侧删除时,主体成为最后一个子节点,因此如果发生这种情况,则重置宽度。

Key CSS

.mainbody {
    width: 570px;
    float: left;
}

.mainbody:first-child,
.mainbody:last-child {
    width: 785px;
}

.left,
.right {
    width: 215px;
    float: left;
}

CSS Only Solution 2

This accounts for the div remaining, but having no content and being zero width (which is apparently what the situation actually is).

这解释了div剩余,但没有内容和零宽度(这显然是实际情况)。

There is a CSS only solution (see this fiddle), but it requires one to restructure the HTML order of the elements and to adjust how they are floated.

有一个只有CSS的解决方案(请参阅此小提琴),但它需要重新构建元素的HTML顺序并调整它们的浮动方式。

Needed HTML Structure (mainbody is last)

需要HTML结构(主体是最后一个)

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

Key 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;
}