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

Question

基本上这是我的布局。 3 行 div(页眉内容和页脚)

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

picture1  detail1picture2  detail2picture3  detail3

there are at least 10 rows of such info. doesn't have to be picture but can also be text

picture div will be about 150px while detail will be the rest. for the sake of example lets say 600px wrapper

i tried a few setups but it didn't come out the way i desired. in a table this would be a cinch but i would like a pure css table-less layout

something i tried but doesn't come out into columns

HTML picture item 1 goes here picture2 item2 goes here

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 或 hack 等。

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

Answer 1

您的结构几乎是正确的。您只需要使用正确的属性...

使用 css，您可以使用 display 属性构建实际的表结构，就像您拥有的那样:

• 显示:表格
• 显示:表格行
• 显示:表格单元格

以及其他，例如 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;
}