html - 使表td灵活小巧

我需要帮助使表的td灵活。

我正在做的是这样的：http://jsfiddle.net/j8GyV/23/

.card_new {
    width: 350px;
    border: 1px solid gray;
    box-shadow: 1px 1px 3px #888;
    border-top: 10px solid green;
    min-height: 250px;
    padding-: 10px;
    margin: 10px;
    background-color: #FFF;
}

img {
    border-radius: 50%;
    width: 70px;
    margin: 10px;
}

.name_new {
    font-weight: lighter;
    margin-left: 100px;
    margin-top: -70px;
}

.info_new {
    margin: 10px;
    font-family: segoe ui;
    line-height: 1.4em;
    font-size: 1.2em;
}

#mainbox, .split_3 {
    box-sizing: border-box;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

我要完成的正是我在jsfiddle中进行的操作，但是当结果窗口的宽度变得足够小以至于将表td堆叠在彼此的顶部时，我希望表td开始调整大小（正在弹性）本身，使其仍适合结果窗口，并且右侧不消失在边缘后面。

最佳答案

您可以添加媒体查询，如下所示：

@media (max-width: 768px) {
    .card_new {
        width: 100%;
    }
}

见http://jsfiddle.net/j8GyV/25/

关于html - 使表td灵活小巧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45402704/