jquery - 在 Div 中对齐 Jquery 的数据表

Question

我在对齐 div 内的数据表时遇到问题。我有一个定义为屏幕 50% 的 div，我想将整个数据表放在 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; 应用到您的表格。这将导致它一直 float 到容器的边缘(注意填充)，并充当内联元素。

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

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

使用行内 block

我的首选方法是使用表格的 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-align 属性。包装 #Container div 只是为了防止它干扰附近的其他元素。

为什么这是首选？

根据我的经验，

float 有时会打乱 DOM 顺序并在更复杂的安排下产生意想不到的结果。这是一种完全有效的方法，但我更喜欢 inline-block，因为它更可预测。

但是，inline-block 也不是完美无缺的。对于水平对齐，带有 inline-block 的多个 div 之间将有一个小空间(文字空间，由浏览器将元素视为文本字符引起)。