2

私は3つの部門を持っています。2 つの小さい方は、同じコンテナー (3 番目の div) 内にあります。

  • 最初の子 div のサイズは 350x350 ピクセルです。
  • 3 番目の div は、別のコンテナー div の 89% です。つまり、そのサイズはわかりません。
  • 最初の子 div とコンテナー div の端の間に 2 番目の子 div スパンを作成したいと考えています。

基本的：

<div id="container">
    <div id="first_child" style="width:350px; height:350px;">&nbsp;</div>
    <div id="second_child" style="width:???px; height:350px;">&nbsp;</div>
</div>

要素と の端の間に要素を正確に配置しsecond_childたい場合、要素の幅をどのように計算すればよいですか?second_childfirst_childcontainer

編集：すばやく描いた画像をアップロードしました。大きな黒い四角はcontainer、測定値が不明です。赤箱はfirst_child、青箱はsecond_childです。の幅を見つけたいので、 の端から右端second_childまで伸びます。first_childcontainer

4

5 に答える 5

3

CSSを使用して行うことができますcalc()：

#second_child {
   width: -moz-calc(100% - 350px);
   width: -webkit-calc(100% - 350px);
   width: calc(100% - 350px);
}

IE8以下の場合、jQueryまたはjavascriptを使用する必要があります

于 2013-04-12T15:06:03.357 に答える
2

必要なのは、次のような css を使用することだと思います。

#container {
    width:89%;
    height:350px;
}
#first_child {
    float:left;
    width:350px;
    height:350px;
}
#second_child {
    height:350px;
    margin-left:350px;
}

これが実際の例です（効果を確認するためのスタイルが追加されています）

于 2013-04-12T15:19:23.100 に答える
1

純粋な CSS を使用した適切な回答が上に示されているので、「必要な幅を見つけるにはどうすればよいですか?」という質問に答えるだけにします。ジャバスクリプトで。

// This is assuming there is no padding.
totalWidth = document.getElementById('container').offsetWidth;
firstChildWidth = document.getElementById('first_child').offsetWidth;
document.getElementById('second_child').style.width = (totalWidth - firstChildWidth) + 'px';
于 2013-04-12T15:16:43.250 に答える
0

jQuery の使用:

var containerWidth = $('#container').width();
$('#second_child').width(containerWidth - 350);
于 2013-04-12T15:06:58.200 に答える
0

最初の子の大きさがわかっているので、純粋な css ポジショニングでそれを行うことができます。

#container {
position:relative
}

#first_child {
width:350px;
height:350px
}

#second_child {
height:350px;
position:absolute;
top: 0;
left:350px;
right:0;
}

コンテナ div には position:relative があることに注意してください。これは、position:absolute が本体の代わりにコンテナー div の左上隅を使用するようにするために必要です。

于 2013-04-12T15:15:31.683 に答える