Могу ли я использовать CSS для выравнивания <div>внутри <td>? - PullRequest
Новая
       11

Могу ли я использовать CSS для выравнивания <div>внутри <td>?

4 голосов
/ 15 мая 2011

У меня есть некоторые сложные табличные данные. В каждом <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, но энергичное Googling помогло мне вовсе. Я уже использую jQuery (и jQueryUI), поэтому, если есть способ jQuery, это тоже сработает.

Halp

ETA: Вы можете увидеть таблицу в действии в этой скрипке: http://jsfiddle.net/mysphyt/JVdDA/. Кнопка под таблицей приблизительно соответствует желаемому поведению с jQuery, но это похоже на очень хитрое решение, и я определенно предпочел бы пойти с чисто CSS-исправлением. Желаемое поведение: div.float сверху TD, div.sink снизу. (Имеется в виду: преподаватели в верхней части ТД и разделы для преподавателей и сотрудников выровнены друг с другом в нижней части.) Мне кажется, что я не особо проясняю свои слова, поэтому, надеюсь, скрипка прояснит, что я имею в виду .

Ответы [ 7 ]

1 голос
/ 20 мая 2011

А как насчет учебы в старшей школе?Это позволит избежать двух ульев, сидящих друг над другом: 

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

Внутренний стол будет приспосабливаться к окружающему td и увеличивать окружающий td, если содержимое ul будет слишком большим.

0 голосов
/ 19 июля 2012

Хорошо, вот мои мысли:

  • Этот стол массивный. Вам следует серьезно подумать об удалении некоторой информации из ячеек или отображении ее каким-либо другим способом
  • Добавление дополнительных строк в «оригинальную» таблицу, скорее всего, значительно ухудшит ситуацию с представлением содержимого => дополнительные данные напрямую связаны с первым div (даже не думайте о row- / colspan)
  • То же самое касается подстолов. Хотя я думаю, что это будет работать без JavaScript. (Просто сделайте вспомогательную таблицу на 100% высотой, затем "подправьте" верхний верхний ряд, нижний нижний ряд)

Вот мое решение:

  • Вам понадобится JavaScript. Существуют решения для столбцов чистого CSS с одинаковой высотой, но они не работают, когда они находятся внутри разных ячеек таблицы - или я не знаю, как это будет работать
  • То, что вы хотите сделать, это сделать верхнюю часть равной высоте
  • Это требует, чтобы "верхняя часть" существовала всегда
  • Вы также захотите изменить свойство valign на "top"

Вот скрипка о том, как это может работать (я развел вашу) http://jsfiddle.net/3NzQ4/1/

0 голосов
/ 05 июля 2012

Сначала добавьте необходимую высоту в ваш ряд, затем

добавить следующий стиль. Это также должно работать, если высота строки не указана.

Но безопасно добавить некоторую высоту для строки. 

.float
{
      position: absolute;
}

.sink
{
     position: absolute;
     margin-top: 50%;
}
0 голосов
/ 08 июня 2012

Приходится соглашаться с предыдущими комментариями. Если вы застряли с использованием таблиц, то придерживайтесь таблиц, и в этом случае используйте rowspan ... http://jsfiddle.net/cssguru/5r5KH/4/

0 голосов
/ 23 мая 2011

Просто примените CSS, который вам нужен, к .float и .sink.Не нужно оборачивать их в div.Мы называем это Divitis, и, учитывая, что «новая школа» не является точной с начала 2000-х годов.

0 голосов
/ 15 мая 2011

Если я правильно понимаю, что вы хотите сделать, так это если, например, у вас есть td с высотой 500px и высотой div.float на 100px, высотой div.sink на 100px, тогда вам не нужен этот нижний край div.float - это верхний край div.sink? Верхний край div.float должен быть верхним краем td, нижний край div.sink должен быть нижним краем td? Тогда я думаю, что Ты можешь сделать это по позиции: абсолют. 

<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, как я редактировал выше. Модификация также css. Я только что проверил, и это работает. :)

0 голосов
/ 15 мая 2011

Попробуйте это http://www.w3schools.com/Css/pr_pos_vertical-align.asp:

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

Если это не поможет, пожалуйста, опубликуйте jsFiddle списка и любой существующий CSS:)

...