Question

我试图显示网站的电影信息，但我遇到了CSS和HTML的问题。我希望标题（导演：，演员：等）与列表中的第一个项目一致，然后让所有其他项目如下所示。我尝试了一个定义列表，但无法找出css以使其响应。现在我有一张桌子，但我开始怀疑常规名单可能会更好。

这是我的fiddle，它看起来当窗口足够宽时我想要它，但是当缩小到移动时会被破坏（这是我希望Cast：列成为一列时）

任何帮助都会受到超级赞赏，我已经玩了好几个月了。

这是我的HTML：

<div class="movieinfo">
    <table>
      <tr class="spaceUnder">
        <td class="workheader">Director:</td>
        <td>John Carney</td>
      </tr>
      <tr class="spaceUnder">
        <td class="workheader">Writer:</td>
        <td>John Carney</td>
      </tr>
      <tr>
        <td class="workheader">Cast:</td>
        <td>Keira Knightly</td>
        <td class="spacedRight">James Corden</td>
      </tr>
      <tr>
        <td></td>
        <td>Mark Ruffalo</td>
        <td class="spacedRight">CeeLo Green</td>
      </tr>
      <tr>
        <td></td>
        <td>Hailee Steinfeld</td>
        <td class="spacedRight">Catherine Keener</td>
      </tr>
        <td></td>
        <td>Adam Levine</td>
    </table>
</div>

和我的CSS：

.movieinfo {
    color: #333333;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 300;
    padding: 20px;
    background-color: rgba(255,255,255,.7);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
}

Answer 1

我认为，您需要@media次查询。像这样：

@media only screen and (max-width: 640px){ your style }

您可以构建HTML宽度<dl>和<ul>

DEMO

如果您在演示中更改窗口大小，则可以看到2列如何成为1列。 Screen 1，Screen 2

Answer 2

通过将演员名称放在单独的单元格中，您在这里部分地滥用了表格。不要让您的设计要求影响您对如何标记数据的决定。这包括为标题单元格使用适当的HTML元素，例如<th>：

<div class="movieinfo">
    <table>
        <tr class="spaceUnder">
            <th>Director:</th>
            <td>John Carney</td>
        </tr>
        <tr class="spaceUnder">
            <th>Writer:</th>
            <td>John Carney</td>
        </tr>
        <tr>
            <th>Cast:</th>
            <td>
                <ul>
                    <li>Keira Knightly</li>
                    <li>James Corden</li>
                    <li>Mark Ruffalo</li>
                    <li>CeeLo Green</li>
                    <li>Hailee Steinfeld</li>
                    <li>Catherine Keener</li>
                    <li>Adam Levine</li>
                </ul>
            </td>
        </tr>
    </table>
</div>

要在列中格式化强制转换，有两个选项，具体取决于您是要垂直还是水平排序项目。对于垂直排序，请使用columns：

.movieinfo ul {
    -webkit-columns: 3 10em;
    -moz-columns: 3 10em;
    columns: 3 10em;
}

编辑：当同时使用宽度和数字columns时，数字是显示的最大列数。可以使用column-gap设置列之间的间隙。

更完整的示例：http://jsfiddle.net/owdz2m0m/

或者横向使用花车：

.movieinfo ul > li  {
    float: left;
    width: 10em;
}

编辑：限制浮点数的列数有点棘手。您需要将周围元素的max-width（在本例中为ul）设置为“列宽*最大列数”。所以要将列限制为2集.movieinfo ul { max-width: 20em; }

更完整的示例：http://jsfiddle.net/tr9e8bmv/

在任何一种情况下，您都可以根据屏幕尺寸调整宽度来使用媒体查询。

在折叠为一列的列中列出电影信息

2 个答案: