如何向此“表”添加行并对齐？答案

【问题标题】：How can I add rows to this 'table' and align it?如何向此“表”添加行并对齐？
【发布时间】：2016-02-14 06:21:32
【问题描述】：

我想在每个主题之间划行，所以如果一个超长，它会对齐两边，所以当你到达底部时，它们会在同一层结束。 http://jsfiddle.net/EMaDB/1401/

<div class="tleft">
      <p><span class="cat">Method: 
</span>testing testing testing testing testing testing testing </p>
      <p><span class="cat">Type: </span> testing testing testing testing testing testing testing testing testing testing </p>
      <p><span class="cat">bright: </span>185</p>
      <p><span class="cat">Max: </span>5kg</p>
      <p><span class="cat">Ratio: </span>6:1</p>
      </div>
<div class="tright">
    <ul>
    <p><span class="cat">Brand Name: </span>Bright</p>
    <p><span class="cat">Test: </span>Left/Right</p>
    <p><span class="cat">Testing: </span>20</p>
    <p><span class="cat">Capacity: </span>5</p>
    <p><span class="cat">Weight: </span>5g</p>    
    </ul>
</div>

CSS

.tleft {
    float: left;
    width: 50%;
}

.tright {
    margin-left: 50%;
}
.cat {
        color: #017b63;
        }

感谢您的帮助！

【问题讨论】：

如果您正在显示表格数据，您为什么不使用<table>？更不用说你现有的 HTML 是无效的（你的 <ul> 不能有 <p> 作为孩子）。
我不知道我在做什么。认为这是最好的方法。也没有注意到那里的 UL，将其删除。

标签： html css html-table

【解决方案1】：

使用display:table 和display:table-cell 将有如下帮助：

<div id="outer">
<div class="tleft">
      <p><span class="cat">Method: 
</span>testing testing testing testing testing testing testing </p>
      <p><span class="cat">Type: </span> testing testing testing testing testing testing testing testing testing testing </p>
      <p><span class="cat">bright: </span>185</p>
      <p><span class="cat">Max: </span>5kg</p>
      <p><span class="cat">Ratio: </span>6:1</p>
      </div>
<div class="tright">

    <p><span class="cat">Brand Name: </span>Bright</p>
    <p><span class="cat">Test: </span>Left/Right</p>
    <p><span class="cat">Testing: </span>20</p>
    <p><span class="cat">Capacity: </span>5</p>
    <p><span class="cat">Weight: </span>5g</p>    

</div>
</div>

CSS：

#outer{
display:table;
}
.tleft {
    width: 50%;
    display:table-cell;
}

.tright {
     width: 50%;
     display:table-cell;
}
.cat {
        color: #017b63;
        }

【讨论】：