2

Вечер добрый! Пытаюсь решить задачку, кто хочет помочь?

Набросал тут 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 в правый угол в вверх:

Хотелки

1 ответ 1

1

Для того чтобы высота была относительной, родителю нужно задать Position:relative, чтобы можно было свободно передвигать изображение, добавьте ему Position:absolute и спозиционируйте:

table,
tr,
td {
  border: 1px #000 solid;
}

.info {
  width: 100%;
  display: table;
}

.info1 {
  width: 70%;
  display: table-cell;
  background-color: red;
}

.info2 {
  position: relative;
  width: 30%;
  display: table-cell;
  background-color: blue;
}

.info2 img {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 100%;
  bottom: 0;
  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>

1
  • Вот я лохундра! Спасибо, ваш код работает как часы!) 20 июл 2017 в 16:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.