Выровняйте <div>к вершине, а одну к нижней части таблицы. - PullRequest
Новая
       5

Выровняйте <div>к вершине, а одну к нижней части таблицы.

3 голосов
/ 28 января 2009

У меня проблемы с некоторым вертикальным позиционированием CSS. Я хотел бы создать страницу со следующим макетом: 

B AAA
  AAA 
  AAA
C AAA

A - сетка (таблица) данных B выровнен к вершине сетки C выровнен по нижней части сетки

Как мне правильно настроить B и C?

РЕДАКТИРОВАТЬ: Извините за путаницу в тегах Div / Table! В идеале я хочу сделать это с помощью чистого CSS, но если это будет много работы, то я согласен с решением Dittodhole использовать таблицу.

Ответы [ 6 ]

6 голосов
/ 28 января 2009

Я только что проверил это (добавляет в обёртку 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.

4 голосов
/ 28 января 2009

почему так подозрительно - это довольно просто: 

<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>
1 голос
/ 13 июля 2012

Я не смог найти решение этой проблемы, которое бы сработало для меня. Самым близким, что я нашел, было решение, которое работало, только если у вас был только 1 ряд. Я использую элемент управления календаря ASP.NET и хочу div в нижней части каждой ячейки даты. Решение, которое я придумал, состояло в том, чтобы JQuery угадал высоту самой большой ячейки и индивидуально установил поле margin для нижнего элемента div, чтобы он работал. 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 голосов
/ 10 февраля 2012

это решение: 

    <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 голосов
/ 25 февраля 2009

Это может быть достигнуто с помощью чистого дизайна div с использованием этого генератора макетов сетки . 4 строки и 4 столбца. оставьте 2-ю и 3-ю сетку 1-го столбца пустыми.

0 голосов
/ 28 января 2009

используя какой-то jQuery, я могу получить этот рабочий кросс-браузер (включая IE6). Для работы IE6 требуется граница оберточного div (может быть, это 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...