我在div中对齐数据表时遇到问题。我有一个div定义为屏幕的50%,我想将整个数据表放在div的右侧。请参阅下面的ascii作为我喜欢的插图。
__________________________
| _________________ |
| | | |
| | | |
| | This is a | |
| | datatable | |
| | | |
| | | |
| | | |
| | | |
| |________________| |
| This is a div |
__________________________|
__________________________
| _________________ |
| | | |
| | | |
| | This is a | |
| | datatable | |
| | | |
| | | |
| | | |
| | | |
| |________________| |
| This is a div |
__________________________|
我已尝试text-align: right
,但这会导致数据表中的信息重新对齐,而不是整个表格。任何帮助表示赞赏。
答案 0 :(得分: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
之间会有一个小空格(一个文字空间,由浏览器将元素视为文本字符引起)。