0

この非常に基本的な質問で申し訳ありません。

幅が均等に含まれるこれら2つのボックスがあります-

        .box1
        {
        width:50%;
        height:200px;
        }

        .box2
        {
        width:50%;
        height:200px;
        }

これらのボックスのコンテナ div は次のとおりです。

.container
{
    border:1px solid green;
    display:inline-block;
    width:100%;
  }

divコンテナーの幅が 100% で、そのコンテインメントdivsが幅の 50% に均等に分割されるタイミングを知りたいです。次に、それらをインラインで整列させた後、インラインにならないのはなぜですか? ただし、幅を 50% 未満に縮小すると、それらが整列します。

それらをfloat属性で揃えると、インラインで表示されますが-

.container
{
    border:1px solid green;
    display:inline-block;
    width:100%;
  }
.box1
{
   float:right;
    width:50%;
       height:200px;
    background:red;
}
.box2
{
    float:right;
    background:red;

    width:50%;
    height:200px;

}

幅が均等に分割されているかどうかをインラインで表示しない理由を知りたいですか?

4

3 に答える 3

2

それらはインラインブロックですが、通常 50% を使用する場合、ピクセルの丸めとマージン/パディングはカウントされません。したがって、実際には、50% は 50% + 10px になり、次の div が同じ行に収まらず、行が分割され、最初の div の横ではなく下にドロップされます。Chrome のインスペクターまたは Firefox の Firebug を使用して要素を検査すると、幅全体を占めていないことに気付くでしょう。

于 2013-07-08T09:31:17.507 に答える