0

div内の3つのスパンで構成される要素を作成したいと思います。3つのスパンは、divによって提供される全幅を使用するものとします。左右のスパンの幅は固定されており、中央のスパンはそれらの間の使用可能なスペース全体を使用する必要があります。私はさまざまなこと（フロート、オーバーフローなど）を試してきましたが、まだ答えが見つからず、アイデアが不足しています...

コードはかなり単純です：

<div class="row">
  <span class="rowLeft">LEFT</span>
  <span class="rowCentre">CENTER</span>
  <span class="rowRight">RIGHT</span>
</div>

次のCSSを使用します。

.row {
  display: block;
  height: 62px;
  border: 1px dotted black;
}
.rowLeft {
  float: left;
  width: 40px;
  height: 60px;
  border: 1px solid red;
}
.rowCentre {
  float: left;
  height: 60px;
  border: 1px dashed blue;
}
.rowRight {
  float: right;
  width: 60px;
  height: 60px;
  border: 1px solid green;
}

このためにjsFiddleを作成しました：http：//jsfiddle.net/ezAdf/

質問：ここから始めて、中央のスパンを左右のスパンの間の利用可能なスペースに伸ばすにはどうすればよいですか？

4

3 に答える 3

1

各スパンでCSSプロパティを使用してdisplay:table-cellから、中央のスパンの幅を100％に設定できます。

jsFiddleの例

.row {
  display: block;
  height: 100px;
  border: 1px dotted black;
}
.rowLeft {
  width: 40px;
  height: 60px;
  border: 1px solid red;
  display:table-cell;
}
.rowCentre {
  height: 60px;
  border: 1px dashed blue;
  display:table-cell;
  width:100%;

}
.rowRight {
  width: 60px;
  height: 60px;
  border: 1px solid green;
  display:table-cell;
}
于 2013-01-05T19:21:40.497 に答える
1

ちょっと@j08691のソリューションのようですが、いくつかの変更があります。（ただし、4つのブラウザーで動作します。）フロートを削除し、spandisplay: table-cellに追加し、 .rowにプラスしました。display: tablewidth: 100%

ここで働くフィドル。

于 2013-01-06T01:51:52.533 に答える
0

CSSファイルに次の変更を加えるだけです。

.row {
  display: block;
  height: 62px;
  border: 1px dotted black;   
  position: relative;
}

.rowLeft {
  width: 40px;
  height: 60px;
  border: 1px solid red; 
  float: left;
}

.rowCentre{
  position: absolute;
  left: 40px;
  right: 60px;
  height: 60px;
  border: 1px dashed blue;  
  float: left;
}

.rowRight{
  width: 60px;
  height: 60px;
  border: 1px solid green;  
  float: right;
}
于 2013-01-05T19:40:16.483 に答える