2

水平方向に配置する必要がある2つのdivがあり、2番目のdivの幅がわかっており、残りのすべての空き領域を取得するために最初のdivが必要です。誰かが私を助けて、それを達成するためにCSSを教えてもらえますか？

4

5 に答える 5

2

あなたはこのようなことをすることができます：

<div style="width:500px;">
    <div style="width:100px;float:right;background-color:cyan;">bar</div>
    <div style="margin-right:100px;background-color:magenta">foo</div>
</div>

バーは、fooのマージンの上にある右側の100pxに浮かんでいます。fooは他の400pxを取ります。

于 2012-09-28T18:59:56.313 に答える
2

そのようなことをしてみてください：

<div style="width:200px; float:left;"></div>
<div style="width:auto;"></div>
于 2012-09-28T18:33:53.880 に答える
0

2番目のコンテナの幅を既知の値に設定し、最初のコンテナの幅をwidth:100%;

于 2012-09-28T18:32:33.100 に答える
0

パーセンテージを使用できます。これは、正確な幅を気にしない場合に便利です。正確な幅が必要な場合は、javascriptを使用して、知っているdivのオフセット幅を取得し、両方のdivをフローティングにします。次に、それに応じて他のdivの幅を設定します。私が注意するのは、他のdivの値をピクセル単位で設定することです。ユーザーがウィンドウのサイズを変更する場合は、それを考慮する必要がありますが、これはより手間がかかります。完全に正確である必要がない場合は、他のdivをパーセンテージで設定します。これにより、ウィンドウのサイズ変更が自動的に処理されます。他の問題がその周りに発生しますが、基本的にそれはそれを達成するための1つの方法です。

于 2012-09-28T18:34:18.077 に答える
0

あなたが求めているのは少しトリッキーです。しかし、これはうまくいくはずです...

http://jsfiddle.net/2hseV/2/

これは、divポジショニングを使用します。これはクロスブラウザ互換である必要があります。私がこのように物事を行っている理由は、2番目のdivを右に押し出さずに、「2つの兄弟divがあり、そのうちの1つは使用可能なすべてのスペースを消費する」と言う簡単な方法がないためです。

たとえば、パーセンテージを使用しようとすると、divを右に押すか、短くなります。

<div style="width: 200px; height: 100px;">
  <div style="width: 100%; height: 100%; float: left;"></div>
  <div style="width: 90px; height: 100%; float: left;"></div>
  <div style="clear: both;"></div>
</div>

したがって、代わりに、次のように、絶対位置gを使用して2番目のdivを最初のdivにオーバーラップすることをお勧めします。

<div style="width: 200px; height: 100px; position: relative;">
  <div style="width: 100%; height: 100%; float: left; position: relative;"><!-- Content of first div here --></div>
  <div style="width: 90px; height: 100%; float: left; position: absolute; right: 0; top: 0;"><!-- Content of second div here --></div>
</div>

ここで注意しなければならないことの1つは、最初のdivのコンテンツが幅が広すぎると2番目のdivの下に入るということです。したがって、幅を制限する必要があるかもしれません。

于 2012-09-28T18:40:42.370 に答える