Как можно вертикально выровнять дно и верх одновременно?

Question

Как можно вертикально выровнять дно и верх одновременно?

0

Я хочу, чтобы вертикальное выравнивание некоторых элементов в верхней части элемента td и некоторых других элементов находилось в нижней части элемента td.

это мой код:

<ItemTemplate>
            <td runat="server" style="position:relative;vertical-align:top;">
                <a runat="server" href='#' class="Up">
                </a>
                <br />
                <asp:Label ID="ProductNameLabel" CssClass="Up"/>
                <br /> 
                <asp:Label ID="SummaryLabel" CssClass="Up"/>

                <br />
                <asp:Label ID="PriceLabel" CssClass="Down" />
                <br />
                <a runat="server" href="#" class="Down">                        
                </a>
                <br />
                <asp:Button ID="Button1" CssClass="Down" />
            </td>
        </ItemTemplate>

Элементы из класса "Вверх" я хочу отображать в верхней части td и элементы в классе "Вниз" в нижней части td.

Я пробовал этот css:

.Up {
    top:0px;   
}

.Down {
    bottom:0px;    
}

И это не сработало. Может ли кто-нибудь помочь мне найти решение?

Stefan P. 06 май 2014, в 14:21

Источник

0

Попробуйте добавить позицию: относительно вашего класса.
Dev'Hamz 06 май 2014, в 12:11
0

vertical-align: top; и vertical-align: bottom; ? w3c имеет больше информации
james 06 май 2014, в 12:11
0

Я попробовал и то, что предложили Dev'Hamz и jamez14. это не сработало
Stefan P. 06 май 2014, в 12:18

Показать ещё 1 комментарий

Теги:

html

css

1 ответ

Ещё вопросы

Попробуйте добавить позицию: относительно вашего класса.
vertical-align: top; и vertical-align: bottom; ? w3c имеет больше информации
Я попробовал и то, что предложили Dev'Hamz и jamez14. это не сработало

daamsie · Answer 1 · 2014-05-06T11-13-00.000Z

Это поможет, если вы предоставили только HTML и CSS в своем примере.

В любом случае, я думаю, что вы ищете позицию: абсолютную

.Up {
    position:absolute;
    top:0;   
}

.Down {
    position:absolute;
    bottom:0;    
}

Это будет относить их относительно первого родителя, у которого есть позиция: относительная на нем.

Заметьте, я также удалил px из вашего 0, так как не нужно указывать, что когда значение равно 0. 0em = 0px = 0% = 0

Вот более полный пример.

Можете ли вы привести пример, не загромождая весь ASP? Это просто смущает вопросы.
скажем, у меня есть что-то вроде этого
<td> <img class = "up"> </ img> <img class = "down"> </ img> </ td> и мне нужно, чтобы 1-е изображение было вверху, а второе - внизу
Я обновил свой ответ примером в jsfiddle, показывающим, как для этого работает position: absolute. Это зависит от того, насколько вы контролируете элементы в ячейке таблицы. Если в нижней части задано более 1 элемента: 0, тогда они будут перекрывать друг друга и скрывать их. Так что вам нужно будет установить левую сторону: на этом, чтобы они сидели рядом.