CSS - 就地破坏元素(不返回到行首)

Question

我在电子商务平台中使用了一些现成的解决方案，其中更改外观和感觉的最佳方法是覆盖/添加新的CSS样式。我不想更改模板 - 因为这意味着更新时的麻烦。

我想知道，我是否可以在不使用标准和 CSS 表格样式的情况下实现表格的效果（使用 display：table-cell 会产生其他一些意想不到的效果）。

我现在有这个效果，例如（显示：内联）

|                                                             |
| [first element ][ second element ][ third element ][ fourth |
| element]                                                    |
|                                                             |

这就是我想要的：

|                                                               |
| [first element ][ second element ][ third element ][ fourth   |
|                                                      element] |
|                                                               |

有什么想法吗？

Answer 1

你可以改用内联块，并为第四个元素提供一个新的ID，该ID将定义一个特定的宽度和高度，使其保持在行中。

Answer 2

1. 如果没有 CSS，您只需在实际的 html 标记中添加
   分隔符，以便您可以垂直拉伸内容。Thi 解决了不更改模板的问题。

2. 或者使用CSS，您可以将第四个元素设置为display：block;并浮动它

3. 另一种选择是将前 3 个元素包装在一个div 中，并向div 添加一些属性

如果这不能完全帮助您，您应该提供一个特定的代码示例。

Answer 3

在不知道你的html布局的情况下，你可以简单地让你的元素表现得像一个表格。

<div class="table-like">
    <div class="td-like">element1</div>
    <div class="td-like">element1</div>
    <div class="td-like">element1</div>
    <div class="td-like">element1</div>
 </div>
.table-like {
    display:table;
    width:100%
}
.td-like {
    display:table-cell;
    width:25%
}

在这里摆弄