-2

3 つの div を並べて配置したい。そのうちの 2 つは幅が固定されていますが、最後の 1 つはページの残りの領域を引き伸ばす必要があります。私のコンテナの幅: 1000px. 固定 div の幅は 200px です。200px の div がない場合、最後の幅は 1000px になります。左にフロートする 200px が 1 つだけある場合、最後の幅は 800px になります。また、右にフロートする 200px が 1 つだけある場合、最後の幅は再び 800px になり、左にフロートします。ただし、ページに 200px の div が 2 つある場合、最後の幅は 600px になり、左の 200px と右の 200px の div の間に配置されます。どうやってやるの？

私はそれをやろうとしています：

i45.tinypic.com/5d1nxe.jpg

4

3 に答える 3

0

編集: nth-child セレクターを使用してここで例を更新し、発生する可能性のある少数の場所を予測して、「自動拡張」div で何をすべきかを決定しました。

div幅のないa のいずれかの側に固定幅をフロートさせるdivと、後者divは自動的に拡張されます。

例はこちら

さまざまな状況で動作させるのは、float 値を変更したり、マークアップを再配置したりするのと同じくらい簡単です。

于 2013-03-12T17:35:40.987 に答える
0

私はここで Google としてサービスを提供しているように感じますが、以下を確認してください。

  1. フレックスボックスの仕様
  2. フレックスボックス モデルの使用説明書/チュートリアル。

次のように仮説を設定する必要があります。

div.container{
  display: box;
  box-orient: horizontal
}
div.container div.child {
  width: 200px;
}
div.container div.child:nth-child(3) {
  box-flex: 1;
}

ほら、それはまさにあなたが探していることをするはずです。ただし、これは IE10 以外のすべてで実験的に実装されているため、ベンダー固有のプレフィックス/プロパティを使用して実装する必要があります。

于 2013-03-12T17:28:25.733 に答える
-1 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
</head>
<body>
<div style="width:1000px; ">
<div id="divA" style="width: 200px; float: left; background-color: blue;">a</div>
<div id="divB" style="float: left; width:600px; background-color: yellow;">b</div>
<div id="divC" style="width: 200px; float: left; background-color: red;">c</div>
</div>
<script>
    if(document.getElementById("divA") == null && document.getElementById("divC") == null) {  document.getElementById("divB").style.width="1000"}
    else if (document.getElementById("divA") == null || document.getElementById("divC") == null)  {  document.getElementById("divB").style.width="800"}
</script>
</body>
<html>
于 2013-03-12T17:55:56.460 に答える