18

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

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

我希望所有单元格的高度由它们的内容设置（即没有高度：样式）

我曾尝试在 cell1 上使用 float:left，但似乎无法让单元格 2 和 3 正常运行。

在这里编辑 JS Fiddle：http: //jsfiddle.net/utZR3/

HTML：

<div class="list-row">
    <div class="list-left">CELL1
    </div>
    <div class="list-right">
        <div class="list-title">CELL2</div>
        <div class="list-filters">CELL3

        </div>
    </div>
</div>
<div class="list-row">
    <div class="list-left">CELL1
    </div>
    <div class="list-right">
        <div class="list-title">CELL2</div>
        <div class="list-filters">CELL3

        </div>
    </div>
</div>
<div class="list-row">
    <div class="list-left">CELL1
    </div>
    <div class="list-right">
        <div class="list-title">CELL2</div>
        <div class="list-filters">CELL3

        </div>
    </div>
</div>

CSS：

.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;

}
4

5 回答 5

13

你需要inline-block并且float：这里是jsFiddle

.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;}

此外，由于您没有使用relative或absolute定位，因此您不需要指定topand left。

于 2013-07-21T14:20:56.870 回答
2

尝试以下操作：（工作 jsFiddle）

HTML：

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

CSS：

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

在这种情况下，您的方法（将divs 放在行中）不是一个好的选择。我的方法是按列分隔它们。

于 2013-07-21T14:16:59.440 回答
1

rowspan 不适用于 display:table，
但您仍然可以使用它来接近您要查找的内容。
http://codepen.io/anon/pen/kqDab
display:inline-table用于演出，所以他们彼此站在一边。你可以把它转回来display:table。

我在这里看到的选项是为父容器设置一个高度，使其高度：XX% 可用于直接子元素（如果是：float、inline-block、table ...）。其他选项是单元格的垂直对齐中间 if display:table-cell;。

您的 HTML 与第一个演示的 CSS 相同：http: //codepen.io/anon/pen/dvlsG

现在编辑 display:flex也是一个不错的选择：http: //codepen.io/anon/pen/aBjqXJ

于 2013-07-21T14:31:52.767 回答
1

您可以使用display:inline-block而不是float. 只需为左右容器设置大约 50% 的宽度（根据填充、边距和边框进行调整）并将它们设置为内联块。

这是我的 jsFiddle

于 2013-07-21T14:20:54.140 回答
0 
<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>

使用显示网格来使用 div 而不是 table

于 2018-10-17T06:53:45.503 回答