2016-10-12 44 views
-1

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>

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

enter image description here

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

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

答えて

0

にする必要があります私はあなたがこの使用フレキシボックスを行うことができます方法を示している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>

+0

ええ、今はエッジが(スポンジボットの左側とパトリックスターの右側に)スペースを持っていますそれらを取り除く? –

+0

nevermind、私はそれを整理しました、あなたは正当化の内容が何であるか教えていただけますか?私は行を削除し、私は視覚的な変化を参照してください? –

+0

ヘンリーは両者のギャップの理由を説明しました。私たちは両方ともあなたが望むことをあなたのコードに取り入れました。正当化コンテンツは、全幅でない場合、中央に保持するものです。スペースを埋めるようにしたら、もはやこれは必要ありません。 – Yoda

0

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

+0

私はテキストを整列させるつもりはありませんよ。 –

+0

3つのボックスをコンテナdivの中央に配置しますか? – Lee

+0

はい、3つの画像の左右にスペースはありません。 –

0

あなたのコンテナの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 -->

+0

インラインブロックの問題は、取り除く苦痛である要素の間にスペースを作成することです。また、w3の学校はひどい資源であり、代わりにMDNを勧めています。https://developer.mozilla.org/en-US/ – Yoda

+0

そのため、私は '.plaatje'の間のスペースを削除しました。あなたが知っているMDNにはチュートリアルはほとんど含まれていません。この場合、私は物事を中心にする方法についてMDNの概要を見ていません。 w3schoolsはかなり荒い年前でしたが、今は初心者のための確かなリソースです。 – henry

+0

チュートリアルに関する公正なコメント。インラインブロックの回避策は、私の意見では恐ろしいです。htmlの奇妙な点に頼っています。これは読者には明らかではありませんが、同じことを実現するためのより適切な手段があります。しかしそれは仕事をします。 – Yoda

関連する問題