Расположение элементов родного брата один над другим - PullRequest
Новая
       0

Расположение элементов родного брата один над другим

0 голосов
/ 20 апреля 2011

У меня есть TABLE с несколькими строками.В каждой строке один из элементов TD содержит несколько элементов DIV, которые:

  1. могут иметь любое измерение, но все они (в пределах одного TD) имеют одинаковое измерение в пикселях
  2. должен располагаться один поверх другого
  3. , содержащий TD, необходимо изменить размер в соответствии с дочерними элементами DIV
  4. Один DIV будет отображаться одновременно (статически)
  5. при переходе с одного на другое будет использоваться затухание (поэтому два из них будут отображаться одновременно)
  6. никогда не будет отображаться более двух из них нав то же время

Это упрощенный пример такой таблицы 

<table>
    <tr>
        <td>Name</td>
        <td>
            <div>First</div>
            <div>Second</div>
            ...
            <div>Last</div>
        </td>
        <td>Additionals</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>
            <div>First</div>
            <div>Second</div>
            ...
            <div>Last</div>
        </td>
        <td>Additionals</td>
    </tr>
    ...
</table>

Очевидным решением будет установка 

div
{
    position: absolute;
}

Это автоматически установит DIV элементов друг над другом (в соответствии с макетом потока), но размер TD останется таким, как если бы он не содержал дочерних элементов.Переполнение ничего не делает, потому что дочерние элементы абсолютно позиционированы. 

td
{
    overflow: auto;
}

Как мне сделать эту работу?

1 Ответ

0 голосов
/ 20 апреля 2011

Знаете ли вы размер деления перед рукой?Если это так, вы можете просто дать обёртке div эти размеры: 

<td>
    <div class="wrapper">
       <div>1</div>
       <div>2</div>
       <div>3</div>
    etc...

Если вы не будете знать размер, то, поскольку вы уже используете JS, вы можете получить размерсначала дочерний div из оболочки, а затем установите размеры оболочки через JS.

ОБНОВЛЕНИЕ:

Единственный способ сделать это с помощью CSS сам по себе - это сделать первый DIV-рендеринг дважды.Первый экземпляр установлен в положение: относительный, а затем его дубликат, как и остальные, может быть установлен в положение: абсолютный.Этот клон тогда действует как прокладка.Вы можете установить видимость: скрытый, если хотите убедиться, что он не отображается визуально (но все еще занимает надлежащее место).Однако недостатком этого является то, что у вас теперь есть дублированный контент на вашей странице, что может не быть идеальным с точки зрения SEO и / или доступности.

Я бы, вероятно, пошел по маршруту JS и взял бы измеренияпосле загрузки страницы.

...