<td> 中的 DIV 向右浮动

Posted 2023-03-05

【中文标题】<td> 中的 DIV 向右浮动

【英文标题】：DIV in <td> float right

【发布时间】：2013-07-31 02:12:54

【问题描述】：

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

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

我想要做的是将“第三”<td>（带有 div）放在表格的右侧，“第一”和“第二”<td> 应该留在左边。

float:right; 的样式不适合我...

【问题讨论】：

你不能只使用divs 和一些 CSS 吗？使用表格进行布局是个坏主意..

“到桌子的右边”是什么意思？您的意思是在单元格内右对齐吗？

【参考方案1】：

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

table 
   width: 100%;

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

【参考方案2】：

<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 版本出现问题

【参考方案3】：

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

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; 

【参考方案4】：

我不知道你想用表格和 div 做什么？但我通常将其用于电子邮件发送者。

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

FIDDLE

html：

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

【参考方案5】：

尝试添加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>
#frfloat:right;
</style>