Question

我试图在容器的不同侧面制作两个元素。在我的实际代码中，这两个元素位于div的两侧，但为了举例，我想在浏览器窗口的两侧使用它们。

所以我做了一个简单的事情：

<html>
<head>
</head>
<body>
<table>
<tr>
<td style="width: 50%;text-align: left;">
This should go left
</td>
<td style="width: 50%;text-align: right;">
This should go right
</td>
</tr>
</table>
</body>
</html>

示例：http://jsbin.com/ocete/

好吧，我并不完全确定如何使用div甚至做得很好。同样在右对齐的表格单元格中，我的实际代码中将有两个元素。一个是图像，一个是文本。我希望它们位于<td>的相对侧。

我怎么能按照我想要的方式做到这一点？我没有看到任何直截了当的方式。（请不要推荐固定定位）

Answer 1

在<table>元素中添加：

style="width: 100%"

一切都很完美，你的桌子还不够大。

Answer 2

如果您希望将图片并排放在桌子的不同侧面，可以使用以下内容：

<table style="width: 100%">
<tr>
<td style="text-alight: left;">
text
</td>
<td style="text-align: right;">
  <table style="width: 100%">
    <tr>
      <td style="text-align: left;">image</td>
      <td style="text-align: right;">text</td>
    </tr>
  </table>
</td>
</tr>
</table>

这应该会让你像

-----------------------------
|text    |image    |    text|
-----------------------------

Answer 3

您没有为表格指定宽度，因此它只有它所需的宽度，因此您无法看到文本对齐方式有所不同。

试试这个

<table style="width: 100%">

再看看。

Answer 4

使用表格进行布局的任何理由？请改用两个div，将每个宽度设置为50％，然后将第二个div浮动到右侧。

Answer 5

为表格添加宽度..

<table style="width: 100%">

编辑：太慢了

Answer 6

你总是会使用桌子吗？如果是这样，上述答案将起作用。但是如果你在容器div中使用两个div，你需要分别向左和向右浮动内部div，然后清除容器div中的浮动。

text-align无法按预期工作

6 个答案: