如何使用div而不是表

如何使用div而不是表

本文介绍了如何使用div而不是表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
/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 :这里是

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

EDITJS 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而不是表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-14 04:54