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;
}

我不能水平对齐图像

1 个答案: