Question

我遇到一些垂直CSS定位问题。我想创建一个具有以下布局的页面：

B AAA
  AAA 
  AAA
C AAA

A是数据的网格（表） B与网格顶部对齐 C与网格底部对齐

如何让B和C正确对齐？

编辑：很抱歉有关Div / Table标签的混淆！理想情况下，我希望用纯CSS做到这一点，但是如果它有很多工作，那么我将满足于dittodhole使用表格的解决方案。

Answer 1

我刚测试了这个（添加了一个包装div）：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css" media="screen">
            #wrapper{ position: relative; }
            #b, #c{ position: absolute; left: 0; width: 80px; background: #ccc; }
            #a{ margin-left: 80px; }
            #b{ top: 0; }
            #c{ bottom: 0; }
        </style>
    </head>

    <body>
        <div id="wrapper">
            <div id="b">Contents of B</div>
            <table border="0" id="a">
                <tr><th>Header</th><th>Header</th><th>Header</th></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            </table>
            <div id="c">
                Contents of C
            </div>
        </div>
    </body>
</html>

div C和B需要给定一个固定的宽度，并且绝对定位。包装器具有相对定位以使其工作。表A给出的余量等于C＆amp;的宽度。乙

我没有测试过跨浏览器，只测试过Firefox 3.

Answer 2

为什么如此可疑 - 这很容易：

<table>
    <tr>
        <td style="vertical-align: top;">B</td>
        <td rowspan="2">grid</td>
    </tr>
    <tr>
        <td style="vertical-align: bottom;">C</td>
    </tr>
</table>

Answer 3

我无法找到适合我的这个问题的任何解决方案。我发现最接近的是一个解决方案，只有在你只有一行时才有效。我正在使用ASP.NET日历控件，并希望在每个日期单元格的底部有一个div。我提出的解决方案是让JQuery猜测最大单元格的高度，并单独设置底部div的margin-top以使其工作。 locationInfo是要移动到每个单元格的底部。 num_events查找单元格中上面列出的条目数。

var line_height = 24; // line height plus padding
$(document).ready(function () {
    // find out the most events in one day
    var most_events = 0;
    $(".locationInfo").each(function () {
        // get number of events in this cell
        var parent_td = $(this).parent();
        var num_events = parent_td.children().length - 2;
        if (num_events > most_events) {
            most_events = num_events;
        }
    });
    //alert(most_events);

    // loop through each (location info) div and reposition by setting margin-top
    // this could  be improved further by finding the most_events for each week instead of the whole month
    $(".locationInfo").each(function () {
        //$(this).css("top", 50);
        parent_td = $(this).parent();
        num_events = parent_td.children().length - 2;
        $(this).css("margin-top", (5 + (most_events * line_height)) - (num_events * line_height));
    });

});

Answer 4

使用一些jQuery，我可以使用这个跨浏览器（包括IE6）。包装div上需要一个边框才能使IE6正常工作（可能是一个hasLayout的东西？）。 Div B可以是一个可变宽度，一切都应该适应。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css" media="screen">
            #wrapper{ position: relative;  border: 1px solid #fff; }
            #b, #c{ position: absolute; left: 0; background: #ccc; margin: 0; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(function(){
                var b_width = $('#b').width();
                var a_height = $('#a').height();
                var c_height = $('#c').height();
                var c_top = a_height - c_height;
                $('#a').css({"margin-left": b_width + "px"});
                $('#c').css({top: c_top + "px"});
            })
        </script>
    </head>

    <body id="">
        <div id="wrapper">
            <div id="b">Contents of B</div>
            <table border="0" id="a">
                <tr><th>Header</th><th>Header</th><th>Header</th></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            </table>
            <div id="c">
                Contents of C
            </div>
        </div>
    </body>
</html>

Answer 5

这可以使用此grid layout generator使用纯div设计来完成。 4行4列。将第一列的第2和第3个网格留空。

Answer 6

这是解决方案：

    <style type="text/css">
    table { width:500px; border-collapse:collapse}
    th, td { border:1px solid black; vertical-align: top;}
    th { width:100px; }
    td { background:#ccc; }
    .wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; height:200px;}
    .manage { text-align:right; position:absolute; bottom:0; right:0; }
    p{ margin: 0 0 5px 0; }
    </style>



<table>
    <tr>
            <th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
            <td><div class="wrap">
                <p><a href="http://www.pronexo.com">www.pronexo.com</a></p>
      <div class="manage">Edit | Delete</div></div></td>
    </tr>

    <tr>
            <th>Cras diam.</th>
            <td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td>
    </tr>
</table>

将<div>对齐到顶部，将一个对齐到表</div>的底部

6 个答案: