1

次のような親divに3つのdivがあります。

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

ウェブサイトの幅は 1000px です。

私が必要とするのは、.mainbodydiv を最小 570px に維持することですが、他の 2 つの div の 1 つがページから削除された場合は、それぞれ 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;
}
4

2 に答える 2

2

CSS のみの解決策 1

これは、「他の 2 つの div の 1 つがページから削除された場合」という質問が正確であったことを前提としています。

次のコードを使用するこのフィドルを参照してください。その重要な部分は、:first-child言及:last-childしたhtml構造の変更に基づいて変更されます。leftを削除すると が、を削除すると が になるmainbodyので、その場合は をリセットします。first-childrightmainbodylast-childwidth

キー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()等 

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

または使用.size() / .length()

于 2013-03-29T13:23:39.300 に答える