logo标签列表

将一个<div>对齐到表格顶部，将另一个<div>对齐到表格底部

htmlcss
3

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

B AAA
  AAA 
  AAA
C AAA

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

我如何使B和C正确地对齐？

编辑：关于Div / Table标记的混淆，对不起！我希望尽可能使用纯CSS来完成此操作，但如果这需要很多工作，则我将接受dittodhole的解决方案，使用表格。

两个问题：1）每个“AAA”都在自己的行中吗？2）您是否希望B和C位于网格外，或者如果必要，可以将它们放置在网格内？ - Crescent Fresh
我正在寻找一种不影响网格(A)的解决方案。相反，我想用Div/Table标签来包装网格。 - John Paul Jones
如果你不想让它在IE6上工作，那么你可以采用Chris的答案...否则我会很高兴 :) - user57508
6个回答
6
我刚刚测试了这个（添加了一个包装 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和B宽度相等的外边距。
我还没有在不同浏览器上测试过，只在Firefox 3上测试过。
1
什么意思？ :) 说真的，如果你需要在IE6上运行它，那么你正在使用表格布局。 - cletus
如果没有指定浏览器限制，那么能否在IE6上运行取决于你的努力程度！因此，必须提供跨浏览器解决方案 :) - user57508
我相信你的话 - 我没有IE6来测试。但是IE7可以工作。 - Chris
同时 B 的宽度是可变的，所以我无法将 A 的边距设置为 B 的宽度。 - John Paul Jones
获取IE Tab https://addons.mozilla.org/zh-CN/firefox/addon/1419 IE Tab 是 Firefox 的插件（是的，它可以在 Firefox 标签页中运行 IE 实例）。 - cletus
4

为什么感觉这么靠不住 - 这其实很简单:

<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>
这个任务如果只使用表格来完成将会很简单。我相信原帖想要通过纯CSS实现，这是非常合理的方法。 - Cerebrus
2
看他的评论：“我希望将网格包装在Div/Table标记中。” - user57508
1

我找不到任何解决这个问题的方法适用于我。我找到的最接近的解决方案只适用于只有1行的情况。我正在使用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));
    });

});
0

这是解决方案：

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

可以使用这个 网格布局生成器 进行纯 div 设计。 4 行 4 列。 将第一列的第二个和第三个网格留空。

0
使用一些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>
这不是纯CSS :) 但我喜欢它！嘿嘿 - user57508
我无法在IE6中完全按要求工作，除非有一点“帮助” =) - Chris
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接