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

Question

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

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

图1细节1 图2 细节2 图3 细节3

至少有 10 行此类信息。不一定是图片也可以是文字

图片 div 大约为 150 像素，其余部分为细节。例如，让我们说 600px 包装器

我尝试了一些设置，但并没有达到我想要的效果。在表格中这将是小菜一碟，但我想要一个纯 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 就像

一样简单

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