Html 如何使用div代替表

我正在尝试创建以下表格布局，但我想使用DIV而不是table：

------------------
|       |        |
| CELL1 |  CELL2 |
|       |        |
|       |--------|
|       |        |
|       |  CELL3 |
|       |        |
------------------

我希望所有单元格的高度都由其内容设置（即无高度：样式）

我曾尝试在单元格1上使用float:left，但似乎无法使单元格2和3正常工作

编辑 JS小提琴在这里：

HTML:

请尝试以下操作：（）

HTML:

---

在这种情况下，您的方法（将

div

s放置在行中）不是一个好的选择。。mine按列分隔它们。

您可以使用

显示：内联块

而不是

浮点

。只需为左右容器设置大约50%的宽度（根据填充、边距和边框进行调整），并使其成为内联块

---

您需要

内联块

和

浮点

：以下是

.list-row {
    background:#f4f4f4;
    display:inline-block;
    border:2px solid red;}

.list-left {
    width:auto;
    padding:10px;
    float:left;
    border: 2px solid blue;}

.list-right {
    padding:10px;
    float:right;
    border:2px solid green;}

---

另外，由于您没有使用相对定位或绝对定位，因此不需要指定顶部定位和左侧定位 但是你仍然可以使用它来接近你想要的东西。

display:inline table

用于显示，因此它们彼此站在一边。您可以将其返回到

显示：表格

我在这里看到的选项是设置父容器的高度，使直接childs元素的高度为XX%available（如果是：float、inline block、table…）。 如果

display:表格单元格，则另一个选项是单元格垂直对齐中间

您可以使用与第一个演示相同的CSS创建HTML：


编辑
显示：flex
现在也是一个不错的选择：

.网格容器{
显示：网格；
} 
1.
2.
3.
4.
5.
6.
7.
8.
9

使用显示网格来使用div而不是表
+1来绘制漂亮的图形，有代码吗？：）没有HTML结构，也没有CSS。你应该向我们展示你的想法，左边的单元格通过Y轴扩展右边的单元格，宽度为s，取决于内容。这只有在表中才能实现。另外，请看一下CSS word wrap；以防有人键入1000个没有空格的字符。
.list-row {
    background:#f4f4f4;
    border:2px solid red;
}

.list-left {
    width:auto;
    padding:10px;
    top:0px;
    left:0px;
    border: 2px solid blue;
}
.list-right {
    top:0px;
    left:60px;
    padding:10px;
     border:2px solid green;
}
.list-title {

    font-size:18px;
    padding:8px;

}
.list-filters {
    padding:8px;

}

<div class="container">
    <div class="cell" id="cell1"></div>
    <div class="cell" id="cell2"></div>
    <div class="cell" id="cell3"></div>
</div>

.container{overflow:hidden; width:100%;}
.cell{width:50%; float:right;}
#cell1{float:left;}

.list-row {
    background:#f4f4f4;
    display:inline-block;
    border:2px solid red;}

.list-left {
    width:auto;
    padding:10px;
    float:left;
    border: 2px solid blue;}

.list-right {
    padding:10px;
    float:right;
    border:2px solid green;}

<style>
.grid-container {
   display: grid;
} 
</style>
<div class="grid-container">
   <div class="grid-item">1</div>
   <div class="grid-item">2</div>
   <div class="grid-item">3</div>
   <div class="grid-item">4</div>
   <div class="grid-item">5</div>
   <div class="grid-item">6</div>
   <div class="grid-item">7</div>
   <div class="grid-item">8</div>
   <div class="grid-item">9</div>
</div>