Question

我想在每个主题之间创建行，所以如果一个超长，它将对齐两侧，所以当你到达底部时它们会在同一级别上结束。 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;
        }

感谢您的帮助！

Answer 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;
        }

如何在此“表格”中添加行并对齐它？

1 个答案: