Как вертикально выровнять столбец таблицы и вершина и нижняя часть?

Попробуйте вот так для значения в div:

   console.log(this.innerHTML)

Для значения в атрибуте

   console.log(this.getAttribute('value'))
10
задан Brian Tompsett - 汤莱恩 16 September 2016 в 10:42
поделиться

3 ответа

Используйте атрибут rowspan (http://www.htmlcodetutorial.com/tables/index_famsupp_30.html) для создания длинного текста (column2), охватывают две строки. Затем поместите Para1 в первый столбец первая строка (выровняйте вершину), затем Para2 в первом столбце вторая строка (выравнивают нижнюю часть).

--------------------------------------
|Para 1 Align Top |This is your very |                   
|                 |long text.  This  |
|                 |is your very long |
|_________________|text.             |
|                 |This is your very |
|                 |long text.  This  |
|                 |is your very long |
|Para2 align bottm|Text.             |
--------------------------------------
3
ответ дан 3 December 2019 в 23:15
поделиться

Самый легкий путь должен быть, чтобы просто использовать vertical-align вершина и нижняя часть в ячейках, которые Вы хотите выровнять:

<table>
<tr>
<td class="top">
<p>Top aligned paragraph</p>
</td>
<td rowspan="2">
<p>Lorem ipsum dolor sit amet consectetuer id egestas condimentum neque elit. Non tortor tempus orci quis condimentum interdum dictum pede Duis enim. Sociis sollicitudin Nulla lacinia risus id sit odio pellentesque Vestibulum et. Ipsum pretium vestibulum et lobortis mauris semper In In id faucibus. Est Integer Curabitur dui Quisque eu habitasse Curabitur gravida vel semper. A libero vel nisl.</p>
</td>
</tr>
<tr>
<td class="bottom">
<p>Bottom aligned paragraph</p>
</td>
</tr>
</table>

и затем CSS:

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

Copy|Paste далеко

9
ответ дан 3 December 2019 в 23:15
поделиться

Если Вы не хотите использовать таблицы, Вы могли бы сделать что-то вроде этого:

<style type="text/css" media="screen">
    .outer {
        position: relative;
        background-color: #EEE;
    }
    .right {
        width: 50%;
        margin-left: 50%;
        background-color: #F88;
    }
    .top,
    .bottom {
        position: absolute;
        width: 50%;
    }
    .top {
        top: 0;
        background-color: #8F8;
    }
    .bottom {
        bottom: 0;
        background-color: #88F;
    }
</style>

<div class="outer">
    <div class="right">Here<br>is a<br>very<br>long<br>text<br>that<br>eventually<br>determines<br>the overall<br>table height.</div>
    <div class="top">top-aligned paragraph</div>
    <div class="bottom">bottom-aligned paragraph</div>
</div>
2
ответ дан 3 December 2019 в 23:15
поделиться
Другие вопросы по тегам:

Похожие вопросы: