Question

我有一张桌子上有一对<td>：

<table>
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

我想要做的是将“第三个”<td>（带有div）放在桌子的右侧，“第一个”和“第二个”<td>应保持不变。

float:right;的样式对我不起作用......

Answer 1

您需要将表格的宽度设为100％，然后控制前2列的宽度，最后右对齐第3列。

http://jsfiddle.net/25Mqa/1/

<table>
 <tr>
  <td class="first">First</td>
  <td class="second">Second</td>
  <td class="third">Third</td>
 </tr>
</table>

CSS：

table { width:100%; }
.first, .second { width:50px; }
.third { text-align:right; }

Answer 2

问题是<table>的宽度默认由其内容决定。如果你希望<table>跨越100％宽度（其包含块），就像块级元素一样，你可以添加table-layout: fixed;然后指定你的宽度 - 或者只是给它一个宽度，具体取决于关于你所追求的，例如

table {
   width: 100%;
}

http://jsfiddle.net/QEaAd/2/

Answer 3

尝试添加style="text-align:right;"

<table>
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px; text-align:right;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

只有你有2个div，一个靠近另一个：

<div id="fr">div1</div>
<div id="fr">div2</div>

你可以正确地漂浮它们：

<style>
#fr{float:right;}
</style>

Answer 4

<table style="width: 100%;">
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px; display: block; float: right;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

http://jsfiddle.net/pbesD/

我相信这可以满足您的需求，但据我所知，浮动表元素会导致Internet Explorer版本出现问题＆lt; 8

Answer 5

我不知道你要对表和div做什么？但我通常将此用于电子邮件。

我使用td的align属性。这有助于确保您的布局看起来像您想要的方式。它适用于所有浏览器:)

FIDDLE

HTML：

<table width="100%">
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px;" align="right">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

DIV向右浮动

5 个答案: