垂直对齐无绝对定位

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 而不是表格，尤其是对于响应式布局。它们比表格更容易制成表格。

更新：

要包含 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