Question

我有一些复杂的表格数据。在每个<td>中，我有两种密切相关的数据，我希望在视觉上分开，如下所示：

<td>
    <div class='float'>
        <ul class='group1'>
            <li>Item 1</li>       
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class='sink'>
        <ul class='group2'>
            <li>item 1</li>       
            <li>item 2</li>
        </ul>
    </div>
</td>

因为这些列表密切相关，所以我想将它们保存在一个表格单元格中。（为group2添加额外的行也需要重新编写生成表的PHP。）我想要做的是让div.float与TD的顶部对齐，div.sink与底部对齐。我觉得这应该在CSS中可行，但有力的谷歌搜索一点也没有用。我已经在使用jQuery（和jQueryUI）了，所以如果有一个jQuery方法可以做到这一点也可以。

HALP？

ETA：你可以在这个小提琴中看到表格：http://jsfiddle.net/mysphyt/JVdDA/。表格下方的按钮近似于jQuery所需的行为，但这感觉就像一个非常隐蔽的解决方案，我绝对更喜欢使用纯CSS修复。期望的行为：TD顶部的div.float，底部的div.sink。（意思是：TD的顶层导师，以及教职员工在底部彼此对齐的div。）我觉得我用我的话语并不是很清楚，所以希望这个小提琴能说明我的意思

Answer 1

去老学校怎么样？这样可以避免两个人坐在一起：

<td>
<table width="100%" height="100%">
    <tr><td valign="top">
        <ul class='group1'>
            <li>Item 1</li>       
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </td></tr>
    <tr><td valign="bottom">
        <ul class='group2'>
            <li>item 1</li>       
            <li>item 2</li>
        </ul>
    </td></tr>
</table>
</td>

如果ul的内容很大，内部表格将调整到周围的td并使周围的td更大。

Answer 2

试试这个http://www.w3schools.com/Css/pr_pos_vertical-align.asp：

.float { vertical-align: top; }
.sink { vertical-align: bottom; }

如果这没有帮助，请发布列表的jsFiddle和任何现有的CSS：）

Answer 3

如果我理解正确你想要做的是，例如，如果你有高度为500px且div.float高度为100px，div.sink高度为100px那么你不希望那个底边缘div.float是div.sink的最高优势？ div.float的上边缘应该是td的上边缘，div.sink的下边缘应该是td的下边缘？然后我认为你可以通过position：absolute。

来做到这一点

<td>
    <div class="class_name"> <!-- added -->
     <div class='float'>
        <ul class='group1'>
            <li>Item 1</li>       
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
     </div>
     <div class='sink'>
        <ul class='group2'>
            <li>item 1</li>       
            <li>item 2</li>
        </ul>
     </div>
   </div> <!-- added -->
</td>

的CSS：

.class_name {
    position: relative;
    height: 100%;  /*added*/
}

.sink {
    position: absolute;
    bottom: 0;
}

但我不确定这是否有效。我过去使用了类似的东西，如果我没记错的话，那会很有帮助。 :)尝试一下，分享一下是否有用。

编辑：将这两个div插入另一个div，就像我上面编辑的那样。 Modifie也css。我刚刚测试了它，它的工作原理。：）

Answer 4

只需应用.float和.sink所需的CSS即可。无需将它们包装在div中。我们称之为Divitis，并认为自2000年初以来，“新学校”并不准确。

Answer 5

必须同意之前的评论。如果你被困在使用表格，那么坚持使用表格，在这种情况下使用rowspan ... http://jsfiddle.net/cssguru/5r5KH/4/

Answer 6

首先在行中添加所需的高度，然后

添加以下样式。如果没有提到行的高度，它也应该有用。

但可以安全地为行添加一些高度。

.float
{
      position: absolute;
}

.sink
{
     position: absolute;
     margin-top: 50%;
}

Answer 7

好的，这是我的想法：

这张桌子很大。您应该认真考虑从单元格中删除一些信息或以其他方式显示它
在＆＃34;原创＆＃34;中添加其他行表格很可能会在内容表示方面使事情变得更糟糕=＆gt;附加数据与第一个div直接相关（甚至不考虑行/ colspan）
子表也是如此。虽然我认为没有JavaScript会有效。（只需使子表100％高度，然后＆＃34; valign＆＃34;顶行顶部，底行底部）

这是我的解决方案：

您需要JavaScript。有纯CSS等高柱的解决方案，但当它们在不同的表格单元格内时它们不起作用 - 或者我不知道它是如何工作的
你想要做的是使鞋面高度相等
这需要＆＃34;上半部分＆＃34;永远存在
您还需要将valign属性更改为＆＃34; top＆＃34;

这里有一个如何运作的小提琴（我分叉你的）http://jsfiddle.net/3NzQ4/1/

我可以使用CSS来对齐<div>中的<div>吗？

7 个答案: