无绝对定位的垂直对准

Question

我正在处理这个数据表，顶部的两个项本质上是动态的，相对于这种类型的其他数据表，大小可能相同，也可能不相同。我试图在不使用绝对定位的情况下，将这些项目垂直对齐到容器的底部。我试过了，当它把内容移到底部的时候，它会从布局的流程中移除它，当你开始调整屏幕的大小时，它会对我的布局造成巨大的破坏，因为我有一个流畅的布局。所以我需要另一种方法来让它起作用，如果存在的话。

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

有没有其他的选择让我把这些东西放在应有的位置？

编辑:我在我的操作中没有清楚地提到这一点，但是我之所以这样设计我的表是因为我希望它非常流畅。当你重新调整屏幕的尺寸时，所有的元素都会“崩溃”，所有元素都垂直排列，而不是并排排列。从表的本质来看，我不能用两个不同的表格单元格来完成这个任务，但是我可以使用一个表格单元格中的元素。为什么第一位是一张桌子？我试图使用显然只适用于表的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