0

問題があり、一般的な解決策があると思いますが、適切に検索する方法がわかりませんでした。2 つの div を隣り合わせに配置したいのですが、どちらもそれぞれ幅の 50% を占めています。ここで、それぞれにパディングを与えたいと思います。何が起こるかというと、現在は 50% を超えているため、互いに隣り合って表示されるのではなく、折り返されて表示されます。ここでのハックは何ですか？

いくつかのコード:

    #nw_main_line1_l {
      height: 512px;
      width: 50%;
      float: left;
      padding-right: 11px;
      background-color: red;
    }
    #nw_main_line1_r {
      height: 512px;
      width: 50%;
      float: left;
      padding-left: 11px;
      background-color: green;
    }

ここで何が起こるかというと、緑のものは赤のものの下にあります。パディングを削除すると、すべて問題なく、例外のように浮きます。

敬具 ：）

4

2 に答える 2

3

これはパディングによるものです。幅を減らすか、次のように最新の方法を使用できます。

* { box-sizing: border-box; }

ボックスサイズの詳細については、こちらをご覧ください。

于 2013-07-16T08:45:29.533 に答える
0

あなたは基本的に問題の答えを自分で見つけましたが、明示的に名前を付けていませんでした。パディングを削除すると、問題が修正されます。パディングをボーダーに交換する (または両方を使用する) と、ボックスが再び壊れていることに気付くでしょう。

これは、少なくとも Firefox のボックス モデルでは、結果として得られるボックス幅 (div など) が次のようになるためです。

2 * [Border-Width] + 2 * [Padding-Width] + width

おそらく、CSS3 フレキシブル ボックスを使用して問題を簡単に回避できます。

于 2013-07-16T08:50:19.867 に答える