Question

所以基本上这是我的布局。 3行div（标题内容和页脚）

我想要做的是在内容div中模拟一个表格式，这样我就可以显示信息

picture1  detail1
picture2  detail2
picture3  detail3

至少有10行此类信息。不必是图片，但也可以是文字

图片div约为150px，其余部分将详细说明。为了举例，我们可以说600px包装器

我尝试了一些设置，但它并没有按照我想要的方式出现。在一个表中，这将是一个cinch但我想要一个纯css无表格布局

我试过的东西，但没有出现在专栏中

HTML 图片第1项到这里图片2 item2到这里

CSS

.itemwrapper{width:600px;}

picture{width:150px;float:left;}
item{width:450px;float:left;}
.clear {clear:both;}

请告诉我如何才能做到这一点。这里的jsfiddle示例 - http://jsfiddle.net/4qvz220b/1/

表就像

一样简单

<table width="500">
<tr>
<td width="150">picture1</td>
<td width="450">item1 goes here</td>
</tr>
<tr>   
<td>
<td width="150">picture2</td>
<td width="450">item2 goes here</td>
</tr>
</table>

有人能指出我正确的方向，除了我可以通过反复试验做的事情之外，我对css了解不多。解决方案必须是跨浏览器兼容的css，没有js或hacks等。

请注意，这不是要布局整个页面，而只是在另一个div中的两列内容。如果可以以某种方式使用无序列表，请告诉我。

Answer 1

你几乎得到了正确的结构。您只需要使用正确的属性......

使用css，您可以使用display属性构建实际的表结构，如下所示：

display: table
display: table-row
display: table-cell

如果您使用正确的语法，还有其他内容，例如header和footer。

所以一个基本的例子（没有任何样式定制）就像是：

FIDDLE LINK

<div class="mainwrapper">
    <div class="itemwrapper">
        <div class="picture">picture</div>
        <div class="item">item 1 goes here</div>
    </div> 
    <div class="itemwrapper">
        <div class="picture">picture2</div>
        <div class="item">item2 goes here</div>
    </div>
</div>

的CSS：

.mainwrapper {
    display: table;
}

.itemwrapper {
    display: table-row;
}

.picture, .item {
    display: table-cell;
}

在纯css中模拟div内的两个列表

1 个答案: