0

ブラウザの全幅で N div を並べて配置するのに問題があります

私はこのようにしたい。ブラウザのサイズを変更するときは、div 間のスペースを同じままにする必要があり、div の幅を変更する必要があります。

|div| |div| |div|

|  div  | |  div  | |  div  |
4

5 に答える 5

1

1 つの解決策は、パーセンテージを使用することです。

div.mydiv {
    width: 33%;
    display: inline-block;
}

これを行う場合は、パディングに注意してください。これにより、 adivの幅が増し、オーバーフローが発生する可能性があります。IE >=8 のみをサポートしている場合は、次のようにして修正できます。

div.mydiv {
    width: 33%;
    display: inline-block;
    -moz-box-sizing: border-box; /* OMG why doesn't Firefox support this yet */
    -webkit-box-sizing: border-box; /* Safari below 5.1, including 5 */
    box-sizing: border-box;
}

そして、それを行うと、さらにもう 1 つの問題が発生する可能性があります。それは、 divs の間のスペースです。これは、それらの間に空のテキスト ノードがあり、それで問題ないとdisplay: inline-block考えているために発生します。-type 形式で配置された要素には、inline空白のテキスト ノードが散在している可能性があります。これを修正するには、かなり悪いハックがあります。

div.containerOfAllTheDivs {
    font-size: 0;
}
div.mydiv {
    font-size: 12px; /* or whatever */
    /* plus the above stuff */
}

これにより、コンテナ内に表示されるテキスト (空白など) は、隣り合ってスタックしている div 内に表示されない限り、サイズがゼロになります12px。私が言ったように、かなり悪いハックです。しかし、それは機能します。

より一般的な解決策は、新しいflexbox の提案ですが、これはまだ大幅な改訂中です。さまざまなブラウザーに 2 つの古いバージョンが実装されており、最新のものは今日 (2012-05-15) の時点でどのブラウザーにも実装されていません。ただし、正確な環境がわかっている場合は、これが良い解決策になる可能性があります。

于 2012-05-15T21:04:34.870 に答える
0

任意の数の div が必要な場合は、次の 2 つのオプションがあります。

  1. 数値がサーバーによって決定される場合 (値はデータベースやセッションなどから取得されます)、サーバー側で適切な CSS を生成できます。このソリューションが望ましいです。
  2. そうでない場合は、JavaScript を使用してビューポートの幅を計算し、それに応じて幅の値を div に割り当てる必要があります。
于 2012-05-15T21:13:52.553 に答える
0

CSS3 フレキシブル ボックス スタイル レイアウトを使用して、コーディングをほとんど行わずに同じことを実現できます。サポートする予定のブラウザによって異なります。

現在、フレキシブル ボックス レイアウトは Webkit エンジンと mozilla でのみサポートされています

于 2012-05-15T21:17:06.107 に答える
0

2 つの div の場合は、次のようにします ( Demo ):

div
{
    width: 49%;
    float: left;
}

3 つの場合は、( Demo )を実行します。

div
{
    width: 33%;
    float: left;
}
于 2012-05-15T21:04:03.170 に答える
0

私はそれが有効であり、あなたに役立つかもしれないと思うので、これを答えとして入れます。960.gs とブートストラップはどちらも、必要なものと同じレイアウトの足場を提供します。960.gs は単なるレイアウトですが、bootstrap が気に入った場合は、サイトでカスタマイズして、レイアウトを処理する部分だけを取得できます。ブートストラップに関する 1 つの注意点として、div 列の左マージンを削除する方法が見つかりませんでした。960.gs には、およびをそれぞれ 0に設定するalphaおよびomegaクラスが含まれています。使用時にこれらをブートストラップに追加する必要がありました。margin-leftmargin-right

これらの足場の 1 つを使用すると、多くの時間と労力を節約できます。コードを後で他の誰かに渡す必要がある場合、または他の誰かと一緒に作業する必要がある場合でも、足場を使用すると、コードを操作するのに役立ちます。

于 2012-05-15T21:43:41.153 に答える