Question

我正在处理这个数据表，并且顶部的2个项目本质上是动态的，相对于此类型的其他数据表，可能是也可能不是相同的大小。我试图将这些项目垂直对齐到容器的底部而不使用绝对定位。我已经尝试过了，虽然它确实将内容移到了底部，但是当你开始重新调整屏幕大小时，它会从布局的流程中删除它，这会严重破坏我的布局，因为我有一个流畅的布局。所以我需要另一个选项来让它工作，如果存在的话。

这是显示我的问题的[jsfiddle]（http://jsfiddle.net/0ox71q84/）。设置就好像我有绝对的定位。 data1中的数据非常大，以至于它将表格中的高2个单元格从页面中清除。

我有没有其他选择可以让这些东西成为应有的位置？

编辑：我没有在我的OP中清楚地提到这一点，但我设计我的桌子的原因是因为我希望它非常流畅。当您重新调整屏幕大小超过某个点时，所有内容都会“折叠”，所有元素都会垂直排列，而不是并排排列。根据表格的本质，我不能用2个不同的表格单元格来完成，但是我可以使用表格单元格中的元素。为什么一张桌子在第一名？我试图使用显然只适用于表的Vertical-alignment:bottom事物。我尝试在我的原始div上使用display: table-cell，但它不起作用，所以我将整个设计切换到一个表，它仍然不起作用。其他一切都很好，我对表格没有任何问题（我知道），这只是这个垂直对齐的东西。。

Answer 1

我不确定这是不是你想要的。请澄清它是否不是。

我在css中取消了绝对定位，所以它看起来像这样：

#data1 {
    float: left;
    width: 48%;
}

#img {
    float: left;
    width: 50%;
}

我添加了一些jQuery，使图片显示在底部。您也可以将它应用于表格：

$(document).ready(function(){
    $(document).resize(function(){
        $('#img').css('margin-top', $('#data1').height() - $('#img').height());
    }); // resize
}); // ready

另外，我必须建议你使用div而不是表格，特别是对于响应式布局。它们比表格更容易制作成表格。

UPDDATE：

要包含jquery，请将此代码放在head标记内的某处：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

之后（但仍然在head标签内），你可以通过将它放在脚本标签内来使用该功能：

<script>
$(document).ready(function(){
    $(document).resize(function(){
        $('#img').css('margin-top', $('#data1').height() - $('#img').height());
    }); // resize
}); // ready
</script>

更新2
我使用实际的浏览器来测试这段代码而不是jsfiddle。对于之前的混乱感到抱歉。您可以将此代码复制并粘贴到head标记中。让我知道它是否适合你：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>

function myFun(){
    $('#b-image').css('margin-top', $('#b-info2').height() - $('#b-image').height());
}
</script>

<script>
$(document).ready(function(){
    $(window).resize(function(){
        myFun();
    }); // resize
}); // ready
</script>

<script>
$(document).ready(function(){
    myFun();
}); // ready
</script>

Answer 2

我相信不需要使用jQuery或JS。

我修补了一下你的小提琴。我认为您的问题与没有正确构建表格更相关。图像处于一个难以操纵的地方。

尝试使用溢出的数据在行内移动图像。完全摆脱绝对定位。然后创建一些列类，以便您可以适当地设置间距。

然后，您可以使用媒体查询来检查设备的大小。不知道你想要它的样子，你可以用它来帮助你开始：

@media
only screen and (max-width: 760px) 
{    
    table, tbody, tr, td {
        display: block;
        width: 100%;
    }
}

这将使您的桌子在屏幕变小时垂直堆叠。

这里有一个很好的例子： https://css-tricks.com/examples/ResponsiveTables/responsive.php

垂直对齐无绝对定位

2 个答案: