如何使用div而不是表 [英] How to use divs instead of tables

问题描述

我尝试创建下面的表布局，但我想使用DIV而不是TABLE：

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

我想通过它们的内容设置所有单元格的高度（即没有高度：样式）

我已经尝试使用float：left on cell1， /jsfiddle.net/utZR3/\">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：

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

解决方案

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

此外， c $ c>相对或绝对定位，您不需要指定 top 和左。

I am trying to create the following table layout, but I want to use DIV instead of TABLE:

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

I want the height of all the cells to be set by their content (i.e. no height: style)

I have tried using float:left on cell1, but can't seem to get cells 2 and 3 to behave.

EDIT JS Fiddle here: 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;

}

解决方案

You need inline-block and float: here's the 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;}

Also, since you're not using relative or absolute positioning, you don't need to specify top and left.

这篇关于如何使用div而不是表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！