Question

我想使用以下布局设置数据样式：

------------------
|        |        |
|  CELL2 | CELL 1 |
|        |        |
|--------|        |
|        |        |
|  CELL3 |--------|
|        | CELL 4 |
------------------

OR（如果html中不存在CELL2）

------------------
|        |        |
|  CELL3 | CELL 1 |
|        |        |
|        |        |
|        |        |
|        |--------|
|        | CELL 4 |
------------------

我不想为此目的使用table。什么是最好的选择？

细胞并不总是存在。所以CELL2可能不会出现在html中，但应该在顶部。

Answer 1

这是1234块的一个解决方案。两列向左浮动。每个包含两行。使用填充样式来定位文本。

<style>
div{
border: 1px dotted #000;
}
</style>

<div style="float:left">
    <div style="float:left; padding:20px 10px;">CELL 2</div>
    <div style="float:left; clear:left; padding:20px 10px;">CELL 3</div>
</div>

<div style="float:left">
    <div style="float:left; padding:20px 10px 40px 10px;">CELL 1</div>
    <div style="float:left; clear:left; padding:10px;">CELL 4</div>
</div>

使用另一个布局选项而不是表

1 个答案: