如何在一行上放置图像（下面有文字）？

Question

如何在同一行中放置11张图像（每张图像下面都有文字）？这是我现有代码的略微简化版本：

＆＃13;

＆＃13;

.a {
    height: 90px;
    width: 90px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1s;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;
    
-moz-animation-direction: normal;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1s;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease-in-out; 
}

.b {
    display: block;
}

＆＃13;

<div id="group-10" class="col-md-12">
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

包装元素并将包装器设置为inline-block。

.ab {
    display: inline-block;
}
.a {
    height: 90px;
    width: 90px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    -webkit-animation-direction: normal;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1s;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;

-moz-animation-direction: normal;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1s;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease-in-out; 
}

.b {
    display: block;
}

<div id="group-10" class="col-md-12">
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
</div>

Answer 2

试一试： -

.col-md-12 {
    width: 100%;
    display: block;
}

img {
    float: left;
    height: 90px;
    width: 90px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    -webkit-animation-direction: normal;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1s;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;

-moz-animation-direction: normal;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1s;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease-in-out; 
}

span {
   float: left; 
}

您的班级名称导致问题1和2。我建议为img和span使用不同的类名。

Answer 3

@StillMoJo类名不能以数字开头，在它们前面添加一个字母，如A1，B2等。 另外，将宽度更正为宽度