Question

这类似于a question I've asked previously，但有一点扭曲。

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

以下是我的要求：

整个列表的宽度必须能够调整大小以适合其容器的宽度。
左手“细胞”的宽度应该相同。我愿意修复它，但宽度的百分比是可取的。
每行需要调整自身大小以适应两个“单元格”中最高的项目的高度。

我是否需要咬紧牙关并将其作为一张桌子，或者是否有一些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>

Answer 2

我可能会漂浮需要离开的东西以及需要向右移动的东西。您仍然可以使用百分比宽度。然后给父级宽度为100％并隐藏溢出以包含浮动。

Answer 3

使用浮点和边距是并排对齐项目的最佳选择。

Answer 4

一开始可能会让人感到困惑，但是请遵循CSS中的注释，你应该没问题:)基本上它使用浮点数，边距，填充和宽度来定位所有内容。然后它使用可爱的 padding-bottom：10000px; margin-bottom：-10000px; hack来获得相同的高度。调整左列的宽度时，请务必考虑宽度，边距，填充和边框。

CSS：

<style type='text/css'>
.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;
 overflow:hidden;
 padding-left:250px; /* Width of aside (width+padding+margin+border) */
}
.transaction-history-list li > aside {
 position:relative;
 float:left;
 width:250px;
 right:250px; /* Width of aside (width+padding+margin+border) */
 margin-left:-100%;
}
.transaction-history-list li > div {
 position:relative;
 float:left;
 width:100%;
 padding-bottom:10000px;
 margin-bottom:-10000px;
 margin-left:-10px; /* Left padding + left border */
 padding-left:10px;
}
.transaction-history-list time {
 display:block;
 color: #999;
 font-size: .8em;
}
</style>

HTML：

<ol class="transaction-history-list">
 <li>
  <div>Created in Starting Activity and assigned to Some User.</div>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
 </li>
 <li>
  <div>Created in Starting Activity and assigned to Some User.</div>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
 </li>
 <li>
  <div>Created in Starting Activity and assigned to Some User.</div>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
 </li>
</ol>

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

4 个答案:

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

4 个答案:

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