文本对齐未按预期工作

发布于 2024-08-14 04:55:58 字数 688 浏览 4 评论 0原文

我试图在容器的不同侧面制作两个元素。在我的实际代码中,这两个元素位于 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 很好地做到这一点。另外,在右对齐的表格单元格中,我的实际代码中将有两个元素。一个是图像,一个是一段文字。我希望它们位于包含它们的 的相对两侧。

我怎样才能按照我想要的方式做到这一点?我没有看到任何直接的方法。 (并且请勿推荐固定定位)

I am attempting to make two elements on different sides of their container. In my actual code these two elements are to be on opposite sides of a div, but for the sake of example, lets say I want them on opposite sides of the browser window.

So I did a simple:

<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>

Example at: http://jsbin.com/ocete/

Well, I'm not entirely for sure how to do this very well with divs even. Also in the right aligned table cell, there will be two elements in my actual code. One is an image and one is a piece of text. I want them to be on opposite sides of the <td> in which they are contained.

How can I do this the way I want? I am not seeing any straight forward way. (and please do not recommend fixed positioning)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

呢古 2024-08-21 04:55:58

在您的 元素中添加:

style="width: 100%"

一切正常,只是您的表格不够大,无法看到它。

To your <table> element, add:

style="width: 100%"

Everything is working perfectly, your table just isn't big enough to see it.

美人如玉 2024-08-21 04:55:58

如果您希望将图像与文本并排放置在表格的不同侧面,您可以使用以下命令:

<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|
-----------------------------

If you're looking to put an image side by side with text on separate sides of a table you can use the following:

<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>

That should get you something like

-----------------------------
|text    |image    |    text|
-----------------------------
江湖正好 2024-08-21 04:55:58

您没有为表格指定宽度,因此它只是需要的宽度,因此您看不到文本对齐方式产生任何差异。

尝试一下

<table style="width: 100%">

,然后再看一下。

You don't have a width specified for your table, so it is only as wide as it needs to be, therefore you can't see the text alignment making any difference.

Try this

<table style="width: 100%">

and take another look.

思念绕指尖 2024-08-21 04:55:58

有什么理由使用表格进行布局吗?使用两个 div 代替,将它们的宽度分别设置为 50%,并将第二个 div 向右浮动。

Any reason to use a table for the layout? Use two divs instead, put their width to 50% each, and float the second div to the right.

蓝礼 2024-08-21 04:55:58

为您的表格添加宽度..

<table style="width: 100%">

编辑:太慢

Add a width to your table..

<table style="width: 100%">

Edit: tooo Slow

橘虞初梦 2024-08-21 04:55:58

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

Are you always going to be using a table? If so the above answers will work. But if you are using two divs within a container div, you need to float the inside divs to the left and right respectively and then clear your floats in the container div.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文