Question

我需要帮助使桌子的td变得灵活。

.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开始调整大小（灵活）本身仍然适合结果窗口，而不是右边消失在边缘后面。

Answer 1

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

getElementById

请参阅http://jsfiddle.net/j8GyV/25/

Answer 2

所以我知道你的意思所以我决定将样式添加到td以使其包装。

td {
  display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
  min-width: 10%;
}

它有效！ http://jsfiddle.net/j8GyV/30/

使桌子在小尺寸上变得灵活

2 个答案: