两个div的垂直对齐问题答案

【问题标题】：vertical alignment issue with two divs两个div的垂直对齐问题
【发布时间】：2016-08-12 13:06:08
【问题描述】：

我在一个数据表中有两个 div，我试图垂直对齐但有一些问题。我想让它们都对齐。

这是问题的截图：

每个 div 都有一个类，即导出按钮 .pull-left 和分页 .pull -right，css 下面：

我尝试添加垂直对齐：中间或底部等，但没有任何区别..

.pull-right {
    float:right;
    display: inline-block;
    position: relative;
}
.pull-left {
    float:left;
    display: inline-block;
    position: relative;
}

这里是控制台的html代码截图，这里代码太多，无法粘贴

这也是我在数据表中使用的 sDom 参数：

"sDom": "<'row'<'col-sm-12'<'pull-right'p><'pull-left'B>r<'clearfix'>>>t<'row'<'col-sm-12'<'pull-left'i><'pull-right'><'clearfix'>>>",

【问题讨论】：

可以使用数据表轻松实现sDom
@claudios 我已经用我正在使用的 sDom 更新了帖子。你有什么建议吗？
您能在此处或在 jsfiddle 中添加您的完整代码吗？
您是否尝试在顶部添加自定义按钮？
@claudios 只是 Datatables 附带的标准按钮。 “B”用于导出按钮，“p”用于分页按钮。

标签： html css datatables

【解决方案1】：

有一些解决方案可以解决这个问题。但我想与您分享这些简单的解决方案。

首先： 使用引导列

`"sDom": '<"col-xs-6" B><"col-xs-6" p>'`

第二

$(document).ready(function() {
    $('#example').DataTable( {
        "dom": '<"toolbar">frtip'
    } );
    $("div.toolbar").html('<b>add your buttons here</b>');
} );

第三或者你也可以这样做：

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'excel', 'pdf', 'print'
        ]
    } );
} );

注意：记得添加按钮工作所需的脚本。

第四个使用CSS：

.dt-buttons.btn-group {
  margin-bottom: -50px; //specify the margin here...
}

【讨论】：

等等。你把你的分页放在哪里了？是在桌子下面还是在上面？
在顶部。这是整个表 -> pasteboard.co/7Cjelg2sI.png
第四个解决方案 - 更新 CSS 边距似乎效果最好。我必须使它成为-28px。使用第一个选项来更新 dom，分页仍然换行到下一行，就像这样 - 见这里：pasteboard.co/7CRAOMBTq.png
不幸的是，我不能在 B 上将 col 大小更改为小于 6，否则会将导出按钮换行。
很高兴我能帮上忙 :) 也许现在您需要更改分页，例如将其限制为 5 个按钮

【解决方案2】：

当您使用浮动时，显示属性不再是 inline-block。在当前情况下，您必须指定宽度。比如 .pull-right {widht:30%} .pull-left {width:60%}

或者只是给他们显示不带浮动的内联块。只要他们不在那里相遇，他们就在同一条线上。

【讨论】：

感谢您的建议。我试过了，但并没有改善这种情况。

【解决方案3】：

您可以将col-md-6 类用于div 标签，而不是使用pull-left 和pull-right。

【讨论】：

好的，我改用了这个，但它让它变得更糟了.."sDom": "<'row'<'col-md-6'p<'col-md-6'B>r<'clearfix'>>>"
试试<'row'<'col-md-6'p><'col-md-6'B>r<'clearfix'>>
减小按钮的col 大小并增加分页，还要检查添加到分页列表的任何顶部填充或边距