html - 没有绝对定位的垂直对齐

Question

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

这是显示我的问题的 [jsfiddle]( http://jsfiddle.net/0ox71q84/ )。设置就好像我有绝对定位一样。 data1 中的数据太大，以至于将表中的上部 2 个单元格从页面中清除。

有没有其他选择可以让我把这些东西放在它们应该在的地方？

编辑: 我没有在我的 OP 中明确提及这一点，但我以这种方式设计表格的原因是因为我希望它非常流畅。当您调整屏幕大小时超过某个点时，所有内容都会“折叠”并且所有元素都垂直排列，而不是并排排列。就表格的本质而言，我不能使用 2 个不同的表格单元格来做到这一点，但是我可以使用表格单元格中的元素。为什么把 table 放在第一位？我试图使用显然只适用于表格的 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 而不是表格，尤其是对于响应式布局。它们比表格更容易制成表格。

更新:

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

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

在那之后(但仍在 head 标签内)，您也可以通过将它放在 script 标签内来使用该函数:

<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>