Question

我在div中对齐数据表时遇到问题。我有一个div定义为屏幕的50％，我想将整个数据表放在div的右侧。请参阅下面的ascii作为我喜欢的插图。

__________________________
|  _________________      |
| |                |      |
| |                |      |
| |   This is a    |      |
| |   datatable    |      |
| |                |      |
| |                |      |
| |                |      |
| |                |      |
| |________________|      |
|    This is a div        |
__________________________|

__________________________
|       _________________ |
|      |                | |
|      |                | |
|      |   This is a    | |
|      |   datatable    | |
|      |                | |
|      |                | |
|      |                | |
|      |                | |
|      |________________| |
|    This is a div        |
__________________________|

我已尝试text-align: right，但这会导致数据表中的信息重新对齐，而不是整个表格。任何帮助表示赞赏。

Answer 1

使用Float

可能最简单但最不喜欢的方式就是将float: right;应用到你的桌子上。这将导致它一直浮动到容器的边缘（注意填充），并充当内联元素。

第二部分很重要，因为这可能会对表格外的附近文本产生一些不寻常的结果。

话虽如此，正如hungerstar指出的那样，使用基本clearfix将处理float的大部分问题。

使用内联阻止

我首选的方法是使用表格的display: inline-block css属性。你基本上可以这样做：

<div id="Container">
    <table> <!-- or div with table styles -->
        ...

CSS：

#Container
{
    text-align: right; /* this effects the actual table */
}

#Container table
{
    display: inline-block;
    width: auto;
    text-align: left; /* to reset table text */
}

非常简单，此模式强制table像内联（text-esque）元素一样，因此我们可以将text-align属性应用于它。包裹#Container div只是为了防止它干扰附近的其他元素。

为什么选择这个？

根据我的经验，

float有时可能会破坏DOM命令，并在更复杂的安排下产生意外结果。这是一种非常有效的方法，但我更喜欢inline-block，因为它更具可预测性。

但是，inline-block也不完美。对于水平对齐，多个div与inline-block之间会有一个小空格（一个文字空间，由浏览器将元素视为文本字符引起）。

在Div中对齐Jquery的数据表

1 个答案: