Question

我遇到一个问题，即当我更改屏幕宽度时，<div>表不会调整大小。我知道你可以用flexbox做到这一点，但我无法弄清楚如何。

这是我目前的代码：

CSS：

.boxer-center {
    display: table;
    border-collapse: collapse;
    margin: auto;
}
.boxer .box-row {
    display: table-row;
    padding: 5px;
}
.box_pricing{
    display: table-cell;
    text-align: left;
    padding: 5px;
    vertical-align: middle;
    border: 1px dashed red;
    min-width: 300px;
}

HTML：

<div class="boxer-center">
    <div class="box-row">
        <div class="box_pricing">Hi</div>
        <div class="box_pricing">Hi</div>
        <div class="box_pricing">Hi</div>
    </div>
    <div class="box-row">
        <div class="box_pricing">asd</div>
        <div class="box_pricing">asd</div>
        <div class="box_pricing">asd</div>
    </div>
</div>

我试图将它转换为flexbox，但它对我不起作用。有人可以帮我吗？

Answer 1

我成功了：

将display:table元素设置为100％宽度。
将.boxer更改为.boxer-center .boxer并不存在。
将border更改为outline，这样就不会影响细胞的宽度。

.boxer-center {
    display: table;
    border-collapse: collapse;
    width:100%;                  /* Set table to 100% width */
    /* margin:auto                  Removed this as it is not necessary */
}
.boxer-center .box-row {         /* Changed to .boxer-center, .boxer doesn't exist */
    display: table-row;
    padding: 5px;
}
.box_pricing {
    display: table-cell;
    text-align: left;
    padding: 5px;
    vertical-align: middle;
    outline: 1px dashed red;     /* Changed border to outline to preserve box model */
    min-width:100px;             /* No cell will be smaller than 100px */
}

TEST IN JSFIDDLE

Answer 2

.boxer-center {
    position: relative;
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.box-row {
    display: table-row;
    padding: 5px;
}
.box_pricing{
    display: table-cell;
    text-align: left;
    padding: 5px;
    vertical-align: middle;
    border: 1px dashed red;
}

JSFiddle Example

对于表格单元的替代方案，它不会随着屏幕的宽度而变化（换行？）

2 个答案: