要素を要素の中に配置する方法

Question

div内に3つのdivをどのように配置するのかと思いました。ここで

が問題である私のコード例

body { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#container { 
 
    border: 3px solid black; 
 
    height: 90%; 
 
    width: 90%; 
 
} 
 
.plaatje { 
 
    width: 30%; 
 
    height: 70%; 
 
    border: 2px solid black; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
#plaatje1 { 
 
    background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje2 { 
 
    background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje3 { 
 
    background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
}

<div id="container"> 
 
    <div id="plaatje1" class="plaatje"> 
 
    </div> 
 

 
    <div id="plaatje2" class="plaatje"> 
 

 
    </div> 
 
    <div id="plaatje3" class="plaatje"> 
 

 
    </div> 
 
</div>

で、画像の右手側の白いスペースが残っているあなたは何を知っているので、私はそれをマークしています私は話している。

はまた、スケーリングする必要があるので、私は、ウィンドウのサイズを変更する場合、私はそれを完全にサイズ変更する場合、第三の画像が最初以下またはそのないポップを行うこと空間が存在します。

何か助けていただければ幸いです。

Answer 1

にする必要があります私はあなたがこの使用フレキシボックスを行うことができます方法を示しているjsFiddleを作成しました。要素をフローティングする必要はなく、探しているものを正確に提供します。

イメージ（.images）の周りにラッパーを追加し、内容を整列させるために必要なflexプロパティを指定してから、浮動小数点数などの不要なものを削除しました。ここで

はフレキシボックス用ブラウザのサポートです：caniuse:flexbox

body { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#container { 
 
    border: 3px solid black; 
 
    height: 90%; 
 
    width: 90%; 
 
} 
 
.images { 
 
    height: 90%; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.plaatje { 
 
    width: 30%; 
 
    height: 70%; 
 
    border: 2px solid black; 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje1 { 
 
    background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png"); 
 
} 
 
#plaatje2 { 
 
    background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png"); 
 
} 
 
#plaatje3 { 
 
    background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png"); 
 
}

<div id="container"> 
 
    <div class="images"> 
 
     <div id="plaatje1" class="plaatje"></div> 
 
     <div id="plaatje2" class="plaatje"></div> 
 
     <div id="plaatje3" class="plaatje"></div> 
 
    </div> 
 
</div>

Answer 2

あなたは、単にこれを行うには多くの方法があります

Answer 3

あなたのコンテナのdivにtext-align:center;を追加してみてください可能性があり、あなたはおそらくで始まる必要があります - この初級レベルの問題は、多くの場合、SOのために適切ではないとしてフラグを立てます。

しかし！ようこそ。あなたがこれを行う方法の1つです - 私は何が起こっているのかを説明するコメントを追加しました。基本的にあなたのfloat: leftは定義上、.plaatjeを中央にすることは不可能でした。そしてtext-align: centerを含む要素

body { 
 
    position: fixed; /* probably don't actually want */ 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; /* add */ 
 
} 
 
#container { 
 
    border: 3px solid black; 
 
    height: 90%; 
 
    width: 90%; 
 
    margin-left: 5%; 
 
    text-align: center; /* add */ 
 
} 
 
.plaatje { 
 
    width: 30%; 
 
    height: 70%; 
 
    border: 2px solid black; 
 
    /* float: left;  // remove 
 
    text-align: center;*/ 
 
    display: inline-block; /* add */ 
 
} 
 
#plaatje1 { 
 
    background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje2 { 
 
    background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje3 { 
 
    background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
}

<div id="container"> 
 
    <div id="plaatje1" class="plaatje"> 
 
    </div><div id="plaatje2" class="plaatje"> 
 

 
    </div><div id="plaatje3" class="plaatje"> 
 

 
    </div> 
 
</div> 
 

 
<!-- removed spaces between the divs -->