css - 我无法水平对齐图像

Question

我似乎无法让我的图像并排对齐，它们只是不断堆叠在一起。我的知识只够按照说明摸索着走，我被困在这里了。

HTML:

<div class='sticky-bar'>
    <div class='sticky-bar-inner'>
        <div>
            <a href='https://www.facebook.com/salvageinteriors' target='_blank'>
                <img src='img.png' /> 
            </a>
        </div>
    </div>
</div>

我似乎无法在此处获取其余代码，但它只是不断重复上述内容。

CSS:

.sticky-bar {
    background: none repeat scroll 0 0 #FFFFFF;
    bottom: 0;
    color: #000000;
    font-weight: 700;
    left: 10px;
    margin: 9px;
    opacity: 0.6;
    position: fixed;
    width: 45px;
    z-index: 62;
}

.sticky-bar-inner {
    display: inline-block;
    margin-left:auto;
    padding: 20px 0;
    text-align: left;
    width:90%;
}

Answer 1

试试这个:

使用float:left 属性。它将用于并排对齐 div，当达到父级宽度时，图像将在下一行对齐。

HTML:

<div class='sticky-bar'>
    <div class='sticky-bar-inner'>
        <div class="inner-divs">
            <a href='https://www.facebook.com/salvageinteriors' target='_blank'>
                <img src='img.png' /> 
            </a>
        </div>
    </div>
</div>

CSS:

设置.sticky-bar-inner类的宽度

.sticky-bar-inner {
    padding: 20px 0;
    width:500px;
}

并将float:left 属性设置为内部图像div。

.inner-divs{
   float:left;
}