如何使用div的，而不是表

我试图创建下面的表格布局，但我想，而不是使用表DIV：如何使用div的，而不是表

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

我希望所有的单元格的高度被设定自己内容（即没有高度：风格）

我已经尝试使用float：left在cell1上，但似乎无法获取单元格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; 

}

来源

2013-07-21 alias51

+1一个不错的绘图，任何代码？ :) – dbf

没有HTML结构，也没有CSS.You应该告诉我们你试过的是什么 –

我相信，左边的单元格将右边的单元格扩展到Y轴，并且宽度-s取决于内容，这只能通过表格 –

你需要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 。

来源

2013-07-21 14:20:56 frenchie

谢谢，向右分区添加最大宽度并正常工作 – alias51

另外，请看一下CSS文字包装;以防万一有人输入1000个字符而没有空格。 – frenchie

尝试以下方法：（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 S IN行）是不是在这种情况下，一个不错的选择..我的按列将它们分开。

来源

2013-07-21 14:16:59

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

Here is my jsFiddle

来源

2013-07-21 14:20:54 Dolchio

rowspan不适用于显示：表，
但您仍然可以使用它来接近您正在查找的内容。
http://codepen.io/anon/pen/kqDab
display:inline-table用于表演，所以他们站在彼此旁边。您可以将其重新设为display:table。

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

您HTML与第一张小的相同的CSS：http://codepen.io/anon/pen/dvlsG

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

来源

2013-07-21 14:31:52

如何使用div的，而不是表

回答

相关问题