html表格单元格内容左右相同位置

Question

我试图从左表单元格和右表单元格中获取文本以在同一位置对齐。如果这有帮助，我也会使用 Blogger。这是我想要的图片

What i want

这是我的表格html

<div id="text1">
Motives are extremely important and  not taking care of your motives can cause alot of problems.</div>
<br />
<br />
<div id="table1">
<br />
<table border="0" cellpadding="3" cellspacing="3" id="table1" style="background-color: white; border-collapse: collapse; border: 0px solid #FFCC00; color: black; width: 850;">

<tbody>
<tr>


<td height="400px" width="425px">
<div id="title1">

Sims with Bad Motives:</div>
<br />

<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Can cause your work or school performance to suffer</li>
<br />
<li>Can give you a negative moodlet. </li>
<br />
<li>Can cause death</li>
</ul>

</div>

</td>



<td height="400px" width="425px"><div id="title1">
Sims with Good Motives:
</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Get promotions fast</li>
<br />
<li>Earn life time rewards from mood bar being high.</li>
<br />
<li>Get to pick two extra traits when a baby is born</li>
<br />
<li>Learn skills faster</li>
</ul>
</div>
</td>

</tr>
</tbody></table>
</div>

这是与之关联的任何 css

#title1 {
text-align:center;
text-decoration: underline;
font-weight: bold;
font-size: 20px;
}

#text1 {
font-size: 15px;
text-align: center;
}

#table1 {
text-align: center;
vertical-align: top center;
}

#table1 {
margin-top: -10px;
}

Answer 1

天哪，可怕的标记。我几乎不能看它:)

然而，页面上有具有相同 ID 的元素 > #title1、#table1... ID 是唯一的。类可在同一页面上重复使用。您可以在不同的页面上使用相同的 ID，但不能在同一页面上使用具有相同 ID 的两个元素。

您需要将某种统一性应用到您的标记中，这就是类的用途。您的左右栏需要某种相同的布局。

这是“修复”:jsfiddle.net/swqza86p

我所做的是将 ID 转换为类，并使用 vertical-align: top 属性设置 tr 元素。