文本对齐未按预期工作
我试图在容器的不同侧面制作两个元素。在我的实际代码中,这两个元素位于 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>
好吧,我'我什至不完全确定如何用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
在您的
元素中添加:
一切正常,只是您的表格不够大,无法看到它。
To your
<table>
element, add:Everything is working perfectly, your table just isn't big enough to see it.
如果您希望将图像与文本并排放置在表格的不同侧面,您可以使用以下命令:
这应该会给您带来类似的结果
If you're looking to put an image side by side with text on separate sides of a table you can use the following:
That should get you something like
您没有为表格指定宽度,因此它只是需要的宽度,因此您看不到文本对齐方式产生任何差异。
尝试一下
,然后再看一下。
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
and take another look.
有什么理由使用表格进行布局吗?使用两个
div
代替,将它们的宽度分别设置为 50%,并将第二个div
向右浮动。Any reason to use a table for the layout? Use two
div
s instead, put their width to 50% each, and float the seconddiv
to the right.为您的表格添加宽度..
编辑:太慢
Add a width to your table..
Edit: tooo Slow
您总是要使用桌子吗?如果是这样,上述答案将起作用。但是,如果您在容器 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.