Question

我有一些数据（列表），我需要在包含行和列的布局中显示。在我的桌面上，我有空间可以有5列，但我的移动设备只有一列足够的宽度。如何显示此数据，以便在没有其他列的空间时，下一个项目只会开始一个新行。

我尝试使用“float：left;”并且它非常接近我想要的，但是当没有任何空间并且它开始下一行时，我需要列仍然排列。

更新：float：left的问题;是项目不排列成列。由于这些项目是用户可编辑的，因此我无法提前知道它们的宽度。

update2：删除了对表的引用，而是描述了表的样子。

这显示了标记是如何以及我尝试过的示例。它还有一个手动构建的表格，显示我正在尝试让它做什么。 http://jsfiddle.net/7rrcQ/

Answer 1

如果您希望它们按列排列，那么显然对于列，其元素必须始终具有相同的宽度。如果您不想触摸浮动元素宽度，则可以将它们包装在另一个div中，然后修复该div宽度。

否则使用javascript浮动元素宽度进行dinamically计算并应用它们的边距以与列对齐。但无论如何你必须考虑一些列宽，已知的小修道院或从该列中第一个动态加载的元素计算。

如果要将列数调整为页面宽度，则所有列中的所有列元素必须具有相同的宽度（如果您希望它们对齐），因为一个元素可能来自列，也可能来自另一个，具体取决于页面宽度。如果此宽度为百分比，那么将始终使用与页面宽度无关的相同列数。在另一种情况下（以像素为单位，em），当页面变得更窄时，列元素将“跳转”到下一行。

Answer 2

我希望这就是你要找的...... http://jsfiddle.net/7rrcQ/5/

<div class="newContainer">

            <div class="tdElement">Lorem</div>
            <div class="tdElement">ipsum</div>
            <div class="tdElement">dolor</div>
            <div class="tdElement">sit</div>
            <div class="tdElement">amet,</div>
            <div class="tdElement">consectetur</div>
            <div class="tdElement">adipiscing</div>
            <div class="tdElement">elit.</div>
</div>

你的Css

.container {
  overflow: auto;
  width: 100%;
}
.tdElement{
  border:1px solid black;
  float:left;
  width:100px;

}

Answer 3

如果不将项目设置为特定宽度（在某些单位中），则无法实现结果。一个表（无论是在HTML中还是在CSS中使用display: table等）可以根据项目的宽度要求获得浏览器分配的列宽，但是您需要以特定方式将内容划分为列。

要使列数取决于可用的总宽度，您需要编写脚本并进行猜测。

如果等宽项目可以接受（我不明白为什么不这样做），如果你可以对em单位的最大宽度做出合理的猜测，你可以使用你当前的{{1} }和div标记），只有以下样式表：

span

主要问题是相邻的边界不会崩溃。对不起，我没有办法解决这个问题。

如何创建包含行和动态列数的HTML / CSS布局

3 个答案: