0

Учусь делать верстку, хочу натянуть ее на laravel сделать для себя блог от начала до конца и научиться верстке работе с фреймворком итд. Использую чистый CSS Через пред процессор. И вот загвоздка, сделал обтекаемою картинку но если мало текста то она выходит за границу блока, как масштабировать картинку по высоте блока и так сделать чтобы картинка растягивала блок а не выпадала из него, еще не выбрал что лучше будит смотреться, но для обучения нужно разобраться с двумя решениями.

введите сюда описание изображения

введите сюда описание изображения

#content {
  margin-left: $widthMenu;
  margin-right: $widthMenu;
  min-height: 100vh;
  .post {
    background-color: #eee;
    margin-bottom: 10px;
    box-shadow: 0 0 3px #333;
    border-radius: 3px;
    //$Border
    padding: 15px;
    min-height: 50%;
    font-family: cambria;
    img {
      //height:300px;
      box-shadow: 0 0 3px #333;
      margin: 10px;
      float: left;
      border: 7px solid #eee;
      width: 50%;
      vertical-align: top;
      max-width: 250px;
    }
    .img {
      box-shadow: 0 0 3px #333;
      margin: 10px;
      border: 7px solid #eee;
      width: 100px;
      ;
      height: 100px;
      ;
      background-size: cover;
      //max-width:250px;
      vertical-align: top;
    }
    .title {
      font-size: 27px;
      color: #777;
      text-shadow: 0 0 1px #333;
      transition: 0.3s;
      font-family: cambria;
      &:hover {
        text-shadow: 0 0 3px #333;
        cursor: pointer;
      }
    }
    p {
      margin: 5px;
    }
    .postFutter {
      margin-top: 7px;
      text-align: right;
      a {
        color: #aaa;
      }
    }
  }
}
HTML
<div class='post'>
  <a class="title">Кубизм</a>
  <hr>
  <img src="data/media/media3.jpg">
  <!--div class = "img" style = "background-image: url('data/media/media3.jpg');" ><div-->


  <p>
    Took me two hours, got the 4 minute speedrun trophy under two seconds short of the limit after countless of restarts. Very satisfying once you finally succeed. For two dollars it's a fantastic game at a fantastic prize (on the US store, EU was 3€)

  </p>
  <hr>
  <div class='postFutter'>


    <a href="#">Коментарів (0) | </a>
    <a>Дата: 21.06.2021</a>

  </div>
</div>

Решение желательно на css Весь проект

1

1 ответ 1

0

Добавь в конец блока с классом 'post' еще один блок, и дай ему класс например 'clearfix'. Потом в стилях допиши:

.clearfix { clear:both; }
6
  • Попробовал но к сожалению ничего не изменилось, код всего проекта по верстке на гугл диск кинул
    – BOTEMM
    22 июн 2021 в 14:38
  • Нет все заработало спасибо, напутал со вложенными элементами.
    – BOTEMM
    22 июн 2021 в 20:19
  • Проявилась следующая проблема, при развороте меню, меню растягивает пост
    – BOTEMM
    22 июн 2021 в 20:23
  • Применил clear:left; Заработало, меню не меняет размер поста, но кто его знает что будит если левое меню станет больше поста.
    – BOTEMM
    22 июн 2021 в 20:33

Ваш ответ

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

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