css两列列,平衡列高

2023年1月12日 180次阅读

我想创建一个2列列表.

-----------------------------------
price         1.5
-----------------------------------
description   Some text about the
              product written here
              and will expand the 
              height of this column
-----------------------------------
availability  Yes
-----------------------------------
Feature       Some feature about
              the product 
-----------------------------------

我在每个li中使用带有span标签的列表来使内联信息.但问题是当信息变得比描述和特征的情况更长时,列高度不会增长,因此第二行上的文本被隐藏.

那么如何根据写入的文本量使左侧列与右侧列的高度相同？

最佳答案 正如Cletus关于你的问题的评论所说……用一张桌子.表有一个有效的用途,如果这不是一个,那么什么都没有 – 显示这种类型的数据是它们被实现的确切原因.

<style type="text/css">
  table.product td, table.product th {vertical-align: top; padding: 5px;}
</style>
<table class="product" cellspacing="0" border="0" width="250">
<tr>
  <th>price</th>
  <td>1.5</td>
</tr>
<tr>
  <th>description</th>
  <td>Some text about the product written here and will expand the height of this column</td>
</tr>
<tr>
  <th>availability</th><td>yes</td>
</tr>
<tr>
  <th>Feature</th>
  <td>Some feature about the product</td>
</tr>
</table>
点赞