0

Есть два блока div. Поставлены в одну строку. В первом диве есть изображение, которое может меняться, соответственно меняя высоту своего блока. Нужно, чтобы правый блок был равен высоте левого, при любом изображении. То что было найдено в интернете, не помогло. Так же интересует как сделать блоки .tags и .name той же ширины, что и блок с картинкой. И как прикрепить #comm к нижней границу правого блока?

.main{
  margin-bottom: 60px;
}

.container {
  border: 1px solid black;
  max-width: 1050px !important;
  height: auto;
}

.container .div {
  float: left;
  background: #fff;
}


#left img {
  width: 700px;
  max-width: 800px !important;
  height: auto;
}

#right{
  width: 300px ;
  height: 500px;
  padding-left: 50px;
}

.tags, .name{
  border: 1px solid black;
  width: auto;
  max-width: 1050px;
  height: 40px;
}

#comm {
  vertical-align: bottom;
  border: 1px solid black;
  height: 30px;}
<div class="main">
  <div class="name">222</div>
  <div class="container">
    <div class="div" id="left"><img src="http://ivlowen.pw/JPLv.jpg"></div>
    <div class="div" id="right">
      <div></div>
      <div id="comm"></div>
    </div>
    <div style="clear:both;"></div>
  </div>
  <div class="tags"></div>
</div>

Пример кода

1 ответ 1

1

По-поводу высоты, для родительского блока установите display: table;:

.container {
    display: table;
    overflow: hidden;
}

а для дочерних display: table-cell; и уберите float: left;:

.container .div {
    display: table-cell;
    vertical-align: top;
}

Далее, для того чтобы прикрепить блок #comm к нижней границе, задайте родителю относительное позиционирование, а блоку #comm - абсолютное и добавте свойство bottom: 0;:

#right{
    position: relative;
}

#comm {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Остальные вопросы не совсем понятны, да и во всем этом очень сложно разобраться! Надеюсь я Вам чем-то помог!

Обновлено:

Пример на JSFiddle.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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