Question

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

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

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

我尝试在cell1上使用float：left，但似乎无法让单元格2和3表现出来。

修改 JS小提琴：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;

}

Answer 1

您需要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定位，因此您无需指定top和left。

Answer 2

请尝试以下操作：（working 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;}

你的方法（将div放在行中）在这种情况下不是一个好的选择..我的列按列分隔。

Answer 3

您可以使用display:inline-block代替float。只需为左右容器设置约50％的宽度（根据填充，边距和边框进行调整），并使它们成为内联块。

Here is my jsFiddle

Answer 4

对于显示，rowspan不可用：table，
但你仍然可以用它来接近你想要的东西 http://codepen.io/anon/pen/kqDab
display:inline-table用于演出，所以他们彼此站在一边。你可以把它变回display:table。

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

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

修改 display:flex现在也是不错的选择：http://codepen.io/anon/pen/aBjqXJ

Answer 5

<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代替表格

如何使用div而不是表

5 个答案: