在中心容器内向左浮动div

Question

所有...

我想问一下非常基本的CSS。 请在这里查看http://jsfiddle.net/fzJ8X/5/

HTML：

<div class="container">   
    <div class="item">
        <div class="overlay">
            <img src="http://placehold.it/200x200" />
        </div>
    </div>


    <div class="item">
        <div class="overlay">
            <img src="http://placehold.it/200x200" />
        </div>
    </div>

    <div class="item">
        <div class="overlay">
            <img src="http://placehold.it/200x200" />
        </div>
    </div>

CSS：

.container {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    border: #000 1px solid;
}

.item {
    display: inline-block;
    border: #F00 5px solid;
    width: 200px;
    height: 200px;
    text-align: left;
}

.overlay {
    border: #00F 5px solid;
    width: auto;
    height: auto;   
}

.item img{
    max-width: 100%;
    height: auto;   
    display: block;
}

我在容器内有三个框，它们的样式为text-align：center。 现在，所有盒子都居中，就像我想要的那样，但是如何使所有盒子漂浮在左边呢？ 像下面的截图：

屏幕截图在这里

非常感谢你 ：）

Answer 1

尝试这个：

JS iddle： http ： //jsfiddle.net/xZst7/3/

CSS：

.container {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    border: #000 1px solid;
    display: inline-block;
}

.item {
    display: inline-block;
    border: #F00 5px solid;
    width: 200px;
    height: 200px;
    text-align: left;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

.overlay {
    border: #00F 5px solid;
    width: auto;
    height: auto;   
}

.item img{
    max-width: 100%;
    height: auto;   
    display: block;
}

HTML：

<div style="text-align: center;">
    <div class="container">   
        <div style="display: inline-block; width: 430px;">    
            <div class="item">
                <div class="overlay">
                    <img src="http://placehold.it/200x200" />
                </div>
            </div>


            <div class="item">
                <div class="overlay">
                    <img src="http://placehold.it/200x200" />
                </div>
            </div>

            <div class="item">
                <div class="overlay">
                    <img src="http://placehold.it/200x200" />
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

添加float：left; 到代码

.item {
    display: inline-block;
    border: #F00 5px solid;
    width: 200px;
    height: 200px;
    text-align: left;
    float:left;
}

jsfiddle： http : //jsfiddle.net/fzJ8X/12/

Answer 3

没什么可做的。 添加float：left; 改为.item {}，如下所示。

.item {
    display: inline-block;
    border: #F00 5px solid;
    width: 200px;
    height: 200px;
    text-align: left;
    float:left;
}

检查小提琴