html - 不使用表格的并排元素*具有可变内容*

Question

这类似于 a question I've asked previously , 但有一个转折点。

我有一些内容想用 HTML 语义表示为列表。此列表中的每个条目在左侧和右侧都有可变内容。 This jsfiddle代表了我到目前为止所做的努力的一个例子，但你可以看到，根据窗口的宽度和左侧的文本量，一些内容可能会渗入下一行。

这是我的要求:

1. 整个列表的宽度必须能够调整大小以适合其容器的宽度。
2. 左侧“单元格”的宽度应该相同。我愿意将其固定，但宽度的百分比更可取。
3. 每一行都需要自行调整大小以适应两个“单元格”中最高的元素的高度。

我是否需要硬着头皮把它做成一个表格，或者是否有一些 HTML/CSS 大师可以告诉我这是如何完成的？

Answer 1

名称/日期(旁边)在此版本中出现在段落之前，但它允许在旁边有一个百分比宽度。它也可以调整为几乎任何大小而不会出现任何渲染问题(除非列的宽度小于最长的单词，在这种情况下，您可能需要处理更大的问题)。

CSS:

<style>

/* HTML Block Elements - For Older Browsers */
article,
aside,
footer,
header,
nav,
section {
 display:block;
}

/* Basic Structure - DONT EDIT */
.transaction-history-list li {
 overflow:hidden;
}
.transaction-history-list li > aside {
 float:left;
 /* Uncomment for equal height (background)
    Buggy in IE7
  padding-bottom:10000px;
  margin-bottom:-10000px;
 */
 overflow:hidden;
}
.transaction-history-list li > div {
 /* Uncomment for equal height (background)
    Buggy in IE7
  padding-bottom:10000px;
  margin-bottom:-10000px;
 */
 overflow:hidden;
}


/* Width of Aside */
.transaction-history-list li > aside {
 width:20%; /* Width of aside */
}
.transaction-history-list li > div {
 margin-left:20%; /* Width of aside */
}


/* Misc Styles */
.transaction-history-list {
 list-style:none;
 border-bottom:1px solid #ccc;
 padding:0 0 5px 0;
 margin:0;
}
.transaction-history-list li {
 padding:5px 0 0 0;
 margin:5px 0 0 0;
 border-top: 1px solid #ccc;
}
.transaction-history-list li > div {
 /* Right column */
 padding-left:10px;
}
.transaction-history-list li > aside {
 /* Left column */
}
.transaction-history-list time {
 display:block;
 color: #999;
 font-size: .8em;
 margin:2px 0 0 0;
}
.transaction-history-list p {
 display:block;
 color: #333;
 font-family:sans-serif;
 font-size: .8em;
 margin:4px 0 0 0;
}

</style>

在 HEAD 中(在旧的 IE 中启用 html5 元素):

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

在正文中:

<ol class="transaction-history-list">
 <li>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tellus orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet lorem vitae nulla faucibus rutrum. Phasellus et tellus sit amet turpis feugiat bibendum nec laoreet urna. Etiam vitae leo elit, vel feugiat diam. Sed a augue urna. Nunc semper, nulla vel imperdiet tempor, ante enim dignissim dui, ut vehicula enim felis ut sem.</div>
 </li>
 <li>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
   <p>This column also supports long content.</p>
  </aside>
  <div>Created in Starting Activity and assigned to Some User.</div>
 </li>
 <li>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
  <div>Created in Starting Activity and assigned to Some User.</div>
 </li>
</ol>