Question

我正在编辑我的移动设备论坛。所以，我正在使用媒体查询根据设备宽度格式化首页。

我的问题是所有类别都有这种风格，它将td元素全部放在一行。

<tr class="windowbg2">
                <td class="icon windowbg">
                </td>
                <td class="info">
                </td>
                <td class="stats windowbg">
                </td>
                <td class="lastpost">
                </td>
            </tr>

我不想进入创建行的PHP，到目前为止我的尝试/搜索没有按照我想要的方式工作。

我希望将图标td和信息td压缩到一行，并在其下面有stats和lastpost tds。如何仅使用CSS将此行分成两行？

Answer 1

HTML

<table>
  <tr class="windowbg2">
    <td class="icon_windowbg">
      icon windowbg
    </td>
    <td class="info">
      info
    </td>
    <td class="stats_windowbg">
      stats windowbg
    </td>
    <td class="lastpost">
      lastpost
    </td>
  </tr>
</table>

CSS

table ,td {
  border: 1px solid #000;
}
table {
  width: 100%;
}
td {
  width: 49%;
  float: left;
  display: block;
}

桌子上的边框就是这样，你可以看到它。你可以把它拿走。

样本

http://codepen.io/anon/pen/xbdjoW?editors=110

Answer 2

你想要使用像Twitter的bootstrap或Thoughtbots＆＃34; Bourbon neat＆＃34;这样的网格框架。这些允许您指定主容器的区域大小。那么每个元素将占用多少容器。

波旁威士忌可以使用

tr {
   display:block # you're probably better off using div's though
   @include outer-container;
 }

 ele {
    @include span-columns(6);
 }

如果您的元素是

，这将在12列网格中有效地将两个并排放在一行中

<tr>
  <td class="ele"></td>
  <td class="ele"></td>
</tr>

您可以使用此逻辑使其他逻辑跨越下一行的完整12列。

当然这可以在具有最大宽度等的常规css中完成。网格刚刚为你做了很多工作。 bootstrap更容易使用。我更喜欢波旁王朝更多的放手方式。

如何限制CSS中一行的单元格数量

2 个答案: