html - CSS を使用して画像を配置する

Question

これらの画像を縦ではなく横に並べるにはどうすればよいですか?

jsfiddle

CSS

.images {

    top: -20px;
    width: 1400px;
    float: left;
}

Answer 1

.images div {
    display: inline-block;
}

問題は、画像がコンテナーの幅全体に広がる div 内にあることです。として表示するように設定するとinline-blocks、必要なく整列しfloatます。

Answer 2

.images div > img {
    float:left;
}

ここでjsFiddle

また..

.images > div {
    display: inline-block;
}

ここでjsFiddle

Answer 3

someclass画像を含む divに追加

<div class="images">
<div class="imgs" data-ot="Test 1" data-ot-background="#ffffff" data-ot-shadow-Color="rgba(0,0,0,0.1)" data-ot-border-Width="false"><img src="http://www.yamaha.com/yamahavgn/images/icon_Phone30x30.png" alt="" /></div>
<div class="imgs" data-ot="Test 2" data-ot-background="#ffffff" data-ot-shadow-Color="rgba(0,0,0,0.1)" data-ot-border-Width="false"><img src="http://www.yamaha.com/yamahavgn/images/icon_Phone30x30.png" alt="" /></div>
<div class="imgs" data-ot="Test 3" data-ot-background="#ffffff" data-ot-shadow-Color="rgba(0,0,0,0.1)" data-ot-border-Width="false"><img src="http://www.yamaha.com/yamahavgn/images/icon_Phone30x30.png" alt="" /></div>
</div>

次にいくつかのcssを追加します

.imgs{display:inline}

Answer 4

.images div {
    display: inline;
}

また

.images div {
    float: left;
}

あなたのニーズに応じて。

Answer 5

.images div {
    float: left;
}