Вечер добрый! Пытаюсь решить задачку, кто хочет помочь?
Набросал тут https://jsfiddle.net/qofnh97r/
table, tr, td {
border: 1px #000 solid;
}
.info {
width: 100%;
display: table;
}
.info1 {
width: 70%;
display: table-cell;
background-color: red;
}
.info2 {
width: 30%;
display: table-cell;
background-color: blue;
}
.info2 img {
border: 1px #000 solid;
height: 100%;
vertical-align: text-top;
width: auto;
}
<div class="info">
<div class="info1">
<table>
<tr>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
</tr>
<tr>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
</tr>
<tr>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
</tr>
<tr>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
</tr>
<tr>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
</tr>
<tr>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
</tr>
<tr>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
</tr>
<tr>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
<td>Любой текст Любой текст</td>
</tr>
</table>
</div>
<div class="info2">
<img src="https://www.google.ru/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</div>
</div>
Есть 2 div
'а со стилем display: table-cell
, красный и синий фон показывают, что высота у них одинаковая, т.е если я добавлю новые строки в table
то высота синего блока увеличится.
Как заставить img
растягиваться по высоте синего блока (соответственно зависит от таблицы)? Для img
сделал height: 100%
и width: auto
, почему не работает? И заодно хотелось бы переместить img
в правый угол в вверх: