1

私は以下のdiv構造を持っています:

<div class="Large-Centered-Div">
<div class="Left-Div">
    <div class="Inner-Left-Div">
    </div>
    <div class="Inner-Center-Div">
    </div>
    <div class="Inner-Right-Div">
    </div>
</div>
<div class="Center-Div">
    (Small Image/Etc. Would Go Here)
</div>
<div class="Right-Div">
    <div class="Inner-Left-Div">
    </div>
    <div class="Inner-Center-Div">
    </div>
    <div class="Inner-Right-Div">
    </div>
</div>

私がやろうとしていることは少し複雑ですが、うまくいけばこれはすべて理にかなっています:

  1. 「Large-Centered-Div」をペー​​ジの幅全体に拡張し、「Large-Centered-Div」内に「Left-Div」、「Center-Div」、および「Right-Div」を設定して、 「Center-Div」は小さく、「Left-Div」と「Right-Div」は大きく、「Center-Div」の幅は小さいが中央にあるようにします。

  2. 「Left-Div」と「Right-Div」の両方の中で、「Inner-Center-Div」がスペースの大部分を占め、「Inner-Left-Div」と「Inner-Right-」のみを持つようにしたいと考えています。 Div" は、それぞれのエッジの画像を表示するのに十分なスペースを占有します。また、「Inner-Center-Div」は幅サイズで流動的にしたいと思います。

これらのことを念頭に置いて、リストの最初の目標を達成しましたが、2 番目の目標は達成できませんでした。最初の項目のコードは次のとおりです。

    .Large-Centered-Div {
        位置:相対;
        左：0px;
        右:0px;
    }

    .Left-Div {
        フロート:左;
        垂直整列:中央;
        幅:47%;
    }

    .Center-Div {
        フロート:左;
        幅:6%;
        テキスト揃え:中央;
    }

    .Right-Div {
        フロート:左;
        垂直整列:中央;
        幅:47%;
    }

問題は、どうすれば＃2を達成できるかです。これは可能ですか？

ありがとう。

4

3 に答える 3

0

私がすることは、画像の幅をハードコーディングすることです。それをwピクセルと呼びましょう。それで：

.Inner-Left-Div, .Inner-Right-Div { width: wpx; }

次に、内側の中央のdivが拡張され、残りのスペースが埋められます。

于 2012-06-27T21:01:06.417 に答える
0

画像の内側の左と内側の div を auto にして、中間の div を特定の割合にしてみてください。

于 2012-06-27T20:49:32.437 に答える
0

私がすることは、divの幅をパーセントの関数にすることです。そうすれば、それらは常に互いに相対的に同じになり、完全にサイズ変更されます。



.Large-Centered-Div{
  width: 100%;
}

.Left-Div, .Right-Div, .Inner-Left-Div, .Inner-Right-Div{
  width: 40%;
}

.Center-Div, .Inner-Center-Div{
  width:20%;
}

これは、これを達成するための最も高速で最も DRY な方法です。

また、慣習上、クラス名は小文字のままにしておくことをお勧めします。規則を単純化すると覚えやすくなります。頑張ってください!

-ブライアン

于 2012-08-16T19:58:50.653 に答える