我的目标是如附图所示对齐(左边的字段可以有任意宽度，但右边的字段应该从相同的 X 坐标开始)。
现在我正在使用一个简单的表格代码来实现这一点:
<table><tr>
<td>Left1</td><td>Right 1</td></tr>
<tr><td>Left 2</td><td>Right 2</td></tr></table>
但是，我听说使用表格通常是不好的。有没有一种方法可以使用 CSS 实现相同的设计？该网站是为可能不支持花式 CSS 的移动设备设计的，因此代码必须尽可能简单。
编辑:因为我仍然偶尔会收到来自(大概)刚开始使用 HTML 的人关于这个问题的通知，就像我制作它时一样，请引用 B T 接受的答案因为这是迄今为止实现此功能的最佳方式。建议为“可能重复”的问题(2016 年 5 月 31 日)目前不提供基于表行/表列 CSS 的方法，需要您进行猜测。
我偶然发现了一种更简单的方法来做到这一点。假设您有以下内容:
<div class='top'>
<div>Something else</div>
<div class='a'>
<div>Some text 1</div>
<div>Some text 2</div>
</div>
<div class='a'>
<div>Some text 3</div>
<div>Some text 4</div>
</div>
</div>
您可以使用 css 表格显示样式对齐 Some text 1 和 Some text 2:
.a {
display: table-row;
}
.a div {
display: table-cell;
}
最酷的是，只要“顶部”div 没有样式化 display: table，就对齐而言，其他诸如“Something else”之类的东西就可以忽略了。如果“顶部”div 的样式为 display: table，则“Some text 1”将与“Something else”对齐(即，它将所有子元素视为表格行，即使它们具有不同的显示样式)。
这在 Chrome 中有效，不确定它是否应该以这种方式运行，但我很高兴它有效。
.a {
display: table-row;
}
.a div {
display: table-cell;
}
<div class='top'>
<div>Something else</div>
<div class='a'>
<div>Some text 1</div>
<div>Some text 2</div>
</div>
<div class='a'>
<div>Some text 3</div>
<div>Some text 4</div>
</div>
</div>
个人中心
文章发布
退出
4
我是一名优秀的程序员,十分优秀！