同じ行に3つのdiv画像を保存する方法は？

Question

同じ行に3つの別々の丸いイメージを作成しようとしています。私は正しい位置に2つを取得することができたが、私は正しい行に移動する最後のものを取得することはできません。

.wrap { 
 
    width: 100%; 
 
} 
 

 
.image-left { 
 
    content: url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png); 
 
    height: 250px; 
 
    float: left; 
 
    padding-left: 10%; 
 
} 
 

 
.image-centre { 
 
    content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png); 
 
    height: 250px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.image-right { 
 
    content: url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png); 
 
    height: 250px; 
 
    float: right; 
 
    padding-right: 10%; 
 
}

<div class="wrap"> 
 
    <div class="image-left"></div> 
 
    <div class="image-centre"></div> 
 
    <div class="image-right"></div> 
 
</div>

Answer 1

あなたはあなたのすべての画像のためのfloat: left;を割り当て、その後、正しいマージンを設定することができます。

Answer 2

があり、おそらくこれを行うには良い方法だが、ここで動作するものがあります：https://jsfiddle.net/5ybLh6vy/

<div class="wrap"> 
    <div class="image-left"> 
     <img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png"> 
    </div> 
    <div class="image-centre"> 
     <img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png"> 
    </div> 
    <div class="image-right"> 
     <img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png"> 
    </div> 
</div> 

.wrap { 
    width: 100%; 
    display: table; 
} 

.wrap img { 
    box-sizing: border-box; 
    width: 100%; 
    padding: 5px; 
} 

.image-left, .image-centre, .image-right { 
    display: table-cell; 
    width: 33%; 
} 

Answer 3

どのようにイメージタグを使用して、このようなdivの周りにそれらを包むでしょうか？

.wrap { 
 
    width: 100%; 
 
} 
 
.image-wrapper{ 
 
    width: 33%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
.image-wrapper>img{ 
 
    height:250px; 
 
}

<div class="wrap"> 
 
    <div class="image-wrapper"> 
 
     <img src='https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png'> 
 
    </div> 
 
    <div class="image-wrapper"> 
 
     <img src='https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png'> 
 
    </div> 
 
    <div class="image-wrapper"> 
 
     <img src='https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png'> 
 
    </div> 
 
</div>

Answer 4

あなたはそれらのすべてと、または.wrapクラスににfloat:left;を追加する必要がありますが、あなたはどの各画像にdisplay:inline;を追加する必要がありますきちんとした行にそれらすべてをしたい場合私は最善の解決策だと思う。問題は、ビューポートの幅が十分でなく、次の行にプッシュする場合です。

.wrap { 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
.image-left { 
 
    content:url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png); 
 
    height: auto; 
 
    max-width: 25%; 
 
    padding-left: 10%; 
 
    display:inline; 
 
} 
 

 
.image-centre { 
 
    content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png); 
 
    max-width: 25%; 
 
    height:auto; 
 
    display:inline; 
 
} 
 

 
.image-right { 
 
    content:url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png); 
 
    height: auto; 
 
    max-width: 25%; 
 
    display:inline; 
 
    padding-right: 10%; 
 

 
}

<div class="wrap"> 
 
    <div class="image-left"></div> 
 
    <div class="image-centre"></div> 
 
    <div class="image-right"></div> 
 
    </div>

Answer 5

フロートdiv要素のすべての3つは、右、彼らは幅ます33.33パーセントと、箱サイズ：ボーダーボックス。

これは、3つの均等に間隔を置いたイメージをインラインでフローティングにします。

Answer 6

フレックスボックスで行うこともできますが、インラインイメージを使用することもお勧めします。

.wrap { 
 
    display: flex; 
 
    background-color: crimson; 
 
    padding: 5% 10%; 
 
} 
 
.wrap div { 
 
    flex: 1; 
 
    text-align: center; 
 
} 
 
.wrap img { 
 
    max-width: 90%; 
 
    height: auto; 
 
}

<div class="wrap"> 
 
    <div class="image-left"> 
 
    <img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png"> 
 
    </div> 
 
    <div class="image-centre"> 
 
    <img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png"> 
 
    </div> 
 
    <div class="image-right"> 
 
    <img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png"> 
 
    </div> 
 
</div>