元素不会阵容

Question

我无法对这三个<div>进行排队（图像按比例缩小）：

HTML：

    <div id="container">
        <div id="position">
            <div id="content">
                <div id="logo">
                <div class="ref1">
                    <img src="ref/b_bi.png" />
                </div>
                <div class="ref2">
                    <img src="ref/b_mg.png" />
                </div>  
                <div class="ref3">
                    <img src="ref/b_sl.png" />
                </div>                       
                </div>

            </div>
        </div>
    </div>

CSS：

#logo
{
    width: 100%;
    height: 400px;
    margin-left: 0;
    background-image: url(logo.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.5);

}
.ref1
{
    width:250px;
    height: 400px;
    margin-left:300px;
    background-color: rgba(0,0,0,0.3);
}
.ref2
{
    width:250px;
    height: 400px;
    margin-left: 550px;
    background-color: rgba(0,0,0,0.3);
}   
.ref3
{
    width:250px;
    height: 400px;
    margin-left: 800px;
    background-color: rgba(0,0,0,0.3);

}   
#container 
{ 
    display: table; 
    width: 100%; 
    height: 95%; 
}
#position 
{ 
    display: table-cell; 
    vertical-align: middle; 
    padding-top: 4%;
}
#content { }

Answer 1

我假设你不是DIV并排出现？如果是这样，你需要将样式“float：left”添加到那些DIV（并去除边距）。

Answer 2

喜欢这个？

#logo
{
    width: 100%;
    height: 400px;
    margin-left: 0;
    background-image: url(logo.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.5);

}
.ref1, .ref2, .ref3
{
    width:250px;
    height: 400px;
    float: left;
    background-color: rgba(0,0,0,0.3);
}
#container 
{ 
    display: table; 
    width: 100%; 
    height: 95%; 
}
#position 
{ 
    display: table-cell; 
    vertical-align: middle; 
    padding-top: 4%;
}
#content { }

Answer 3

问题是你的边距左边，可能是类的宽度。如果您移除margin-left和.ref2中的.ref3并添加float:left;所有3个应该做你想做的课程。您可能还需要删除或减少所有3的宽度。

以下是我建议的更改，您可以根据自己的需要调整它。

.ref1
{
    width:250px;
    height: 400px;
    margin-left:300px;
    float:left;
    background-color: rgba(0,0,0,0.3);
}
.ref2
{
    width:250px;
    height: 400px;
    /*margin-left: 550px;*/
    float:left;
    background-color: rgba(0,0,0,0.3);
}   
.ref3
{
    width:250px;
    height: 400px;
    /*margin-left: 800px;*/
    float:left;
    background-color: rgba(0,0,0,0.3);

}