html - 隙間のない横並びのdiv？

Question

SO で見つけたこの Fiddle を参照しておりdisplay: inline-block;、それを自分の作業に適用しましたが、3-4px のギャップではなく、2 つの div を並べて配置する方法がわかりませんか?

http://jsfiddle.net/zygnz/1/

私はもう試した：

html

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>

CSS

div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}

.container div {
    display: inline-block;
}

しかし、何も得られませんでした。

Answer 1

実際には、ギャップを回避するために css で何かを変更する必要はありません。

これは HTML の空白の問題です。

htmlをこれに変更します

<div class="container">
        <div class="left">LEFT
        </div><div class="right">RIGHT
        </div>
</div>

ここでjsFiddle

また

CSSを編集できます

空白の問題を無効にするfloat:left;代わりに使用できます。display:inline-block;