我使用flex来获得以下外观和感觉。
如您所见,该组框的底线与第一行的间距不同。我的标记如下。请注意,我只包含父元素和一个子元素。
<div class="wr-operations">
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
</div>
css如下:
.wr-operations{
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-between;
}
.operation-icon {
width: 88px;
height: 100px;
float: left;
cursor: pointer;
position: relative;
margin: 0px 0px 10px 0px;
font-size: 12px;
background: #fafafa;
padding: 2px 10px 10px 10px;
}
我的问题是如何将底线对齐为第一个!内容应该在第二行保持对齐。
答案 0 :(得分:1)
尝试删除justify-content: space-between;
。或者您可以更改justify-content: flex-start;
(默认为flex-start)。justify-content属性定义浏览器如何在内容项的主轴之间和周围分配空间容器。
.wr-operations{
display: flex;
-webkit-flex-flow: row wrap;
/*justify-content: space-between;*/
}
.operation-icon {
width: 88px;
height: 100px;
float: left;
cursor: pointer;
position: relative;
margin: 10px 10px 10px 10px;
font-size: 12px;
background: #fafafa;
padding: 2px 10px 10px 10px;
}
&#13;
<div class="wr-operations">
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
</div>
&#13;
答案 1 :(得分:0)
移除浮动并相对于图标的位置。
.wr-operations{
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-between;
width: 550px;
}
.operation-icon {
width: 88px;
height: 100px;
cursor: pointer;
font-size: 12px;
background: #fafafa;
padding: 2px 10px 10px 10px;
margin: 0 0 5px 0;
}
&#13;
<div class="wr-operations">
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
<a class="operation-icon text-center ripple">
<i class="fw fw-dial-up icon fw-3x"></i>
<span>Ring</span>
</a>
</div>
&#13;