Question

我正在努力解决CSS布局问题我可以找到一些在某些假设条件下工作的解决方案但是到目前为止我还没有找到能够在所有情况下获得理想结果的解决方案我应该处理

基本情况乍一看似乎很简单：我有一个标签值列表，它基本上是一个表格结构，第一列包含标签，第二列是与标签相关的文本。像这样：

＆＃13;

.label-value-list {
    display: table;
    max-width: 100%;
}

.label-value-row {
    display: table-row;
}

.label-value-cell {
    display: table-cell;
    padding: 5px;
    text-align: left;
    vertical-align: top;
}

＆＃13;

<div class="label-value-list">
    <div class="label-value-row">
        <div class="label-value-cell">Phone:</div>
        <div class="label-value-cell">+49 (0) 123 456789</div>
    </div>
    <div class="label-value-row">
        <div class="label-value-cell">Homepage:</div>
        <div class="label-value-cell">www.example.org</div>
    </div>
    <div class="label-value-row">
        <div class="label-value-cell">Prices starting from:</div>
        <div class="label-value-cell">€100</div>
    </div>
</div>

＆＃13;

在结构非常适合显示屏的简单情况下，如上所述的简单表格布局可以产生理想的效果。

然而，当＆＃34;表＆＃34>时，这种方法不会产生预期的结果。是为了显示广泛。在这种情况下，我想要包装行的单元格，即每个单元格应该在一个单独的行上渲染，几乎就像上面的例子中没有CSS的渲染方式一样。

现在的问题是，我无法对＆＃34;表格的宽度做出合理的假设。或者它的＆＃34;细胞＆＃34;，但我需要整个事情来动态适应细胞的实际内容。

具体来说，这是要求：

我需要一个仅限CSS的解决方案。我知道如果我可以使用JavaScript动态计算数据单元格的宽度，我可以轻松实现我想要的，但需要一个不需要JavaScript的解决方案。
我真的无法对细胞的宽度作出任何合理的假设，无论是绝对的还是相对于桌子或屏幕。
除非需要，否则我不想在整个屏幕上拉伸表格。它应该只取实际所需的宽度，具体取决于它们的内容（如上面的display: table方法）。
只考虑一行，包装规则如下：
- 首先，只要有可能，单元格中的所有文本都将放在一行中。
- 如果一行中的两个单元格不能彼此相邻排成一行，那么这两个单元格应该分开包装。
- 如果，任何只有这样包裹的单元格的内容仍然不完全适合一行，那么该单元格中的文本也应该包裹在多行上。
考虑多行，所有行的行为都应相同。即，如果一行是宽的以完全适合屏幕，因此，其细胞需要被包裹（根据前一点），然后应该包裹所有行中的单元格。不希望一行中的单元格被包裹而另一行中的单元格不被包裹。
如果不需要细胞包装，那么＆＃34;标签＆＃34;和＆＃34;价值＆＃34;单元格应该与列对齐，就像在表格中一样。

以上示例中概述的结构仅是一个示例。只要保留数据流，我就可以将数据包装在任意数量的div中，即每个＆＃34;值＆＃34;单元格紧跟在它的相关标签之后＃34;现在其他＆＃34;标签＆＃34;或＆＃34;价值＆＃34;中间的细胞。

问题最难的部分是我对＆＃34;细胞的宽度一无所知。＆＃34;表＆＃34;提前。我无法使用@media查询解决此问题，因为所需的布局不仅取决于显示宽度，还取决于实际呈现的内容的宽度。

出于同样的原因，我无法通过display: flex; flex-wrap: wrap;方法看到这样做的方法，因为在这种情况下，我需要指定单元格的宽度，否则单元格将不对齐在列中，如果不需要包装。 float或display: inline-block单元格也是如此。

响应式标签值列表/表格灵活地适应渲染数据的实际宽度

0 个答案: