CSS复制一行表

Question

我需要将上面的1行表转换为CSS，这样如果使用手机，它可以调整大小而不会出现问题。我用CSS尝试了很多东西，但没有运气。

请注意，文本是垂直和水平居中的，文本周围有空格，表格单元格之间没有间距，因此每个单元格之间没有空格。整个行也应该水平居中。

如何让它在桌面上看起来像这样，在手机上看起来也不错？我是否还应该使用桌子，如果是这样的话，我怎样才能让它在手机上保持良好状态？

Answer 1

这是一个合适的解决方案。查看jsfiddle。

http://jsfiddle.net/2r6j9y8d/

<div class="row">
    <div class="box is-blue">16 Active</div>
    <div class="box is-green">1 in Escrow</div>
    <div class="box is-gray">7 Expired</div>
    <div class="box is-yellow">26 Sold</div>
    <div class="box is-gray">6 Withdrawn</div>
    <div class="box is-pale">56 Total</div>
</div>

.box {
    float: left;
    width: 100%;
    line-height: 36px;
    padding: 0 12px;
}

.is-blue {
    background-color: lightskyblue;
}

.is-green {
    background-color: palegreen;
}

.is-yellow {
    background-color: lemonchiffon;
}

.is-gray {
    background-color: #ddd;
}

.is-pale {
    background-color: #f8f8f8;
}

@media (min-width: 480px) {

    .box {
        width: 50%;
    }
}

@media (min-width: 768px) {

    .box {
        width: auto;
    }
}

Answer 2

对于垂直对齐，您可以使用＆＃34; line-height＆＃34;值。这也大致决定了盒子的高度。

对于水平对齐，您可以使用＆＃34; text-align：center＆＃34;。

我猜你已经知道＆＃34; background-color＆＃34;设置背景颜色。

另外，你可以使用＆＃34; padding-left＆＃34;和＆＃34; padding-right＆＃34;放一些空间。

如果您使用＆＃34; div＆＃34;块为＆＃34;显示：内联块＆＃34;，然后不要在它们之间放置任何新行，它们之间不会有任何空格。如下所示：

＆＃13;

＆＃13;

<div class="box1">16 Active</div><div class="box2">1 In Escrow"</div>

＆＃13;

＆＃13;

＆＃13;