1

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

Помогите на Float раскидать блоки, один всегда выпадает вниз

        <div class="portfolio-items">
            <div class="portfolio-item_5"></div>
            <div class="portfolio-item_6"></div>
            <div class="portfolio-item_7"></div>
            <div class="portfolio-item_8"></div>
            <div class="portfolio-item_9"></div>
        </div>

https://jsfiddle.net/rq1gmv9r/

1
  • 1
    Можно более подробно? Скорее всего проблема в ширине блоков. Если их суммарная ширина больше ширины контейнера в котором они находятся, то естественно те которые не помещаются будут сползать вниз. Задайте минимальную ширину для контейнера min-width. Commented 26 февр. 2017 в 11:19

1 ответ 1

0

Html :

 <div class="portfolio-items">
   <div class="leftbox">
      <div class="portfolio-item_5">1</div>
      <div class="portfolio-item_9">5</div>
   </div>
   <div class="portfolio-item_6">2</div>
   <div class="portfolio-item_7">3</div>
   <div class="portfolio-item_8">4</div>            
 </div>

Css :

.portfolio-items{
  width: 100%;
}
.portfolio-item_5{
  width: 100%;
  height: 250px;
  background-color: #e1d8cf;
  float: left;
}
.portfolio-item_6{
  width: 33.33333%;
  height: 500px;
  background-color: #ece8cc;
  float: left;
}
.portfolio-item_7{
  width: 33.33333%;
  height: 250px;
  background-color: #513c4b;
  float: left;
}
.portfolio-item_8{
  width: 33.33333%;
  height: 250px;
  background-color: #d7c5ba;
  float: right;
}
.portfolio-item_9{
  width: 100%;
  height: 250px;
  background-color: #f0d93e;
  float: left;
}
.leftbox{
  width : 33.3333%;
  height : 500px;
  float: left;
}
3
  • А реально сделать без добавления блока??
    – Artem
    Commented 26 февр. 2017 в 12:06
  • @Artem конечно можно, например абсолютно их позиционируя. Но мне кажется, что в вашем случае это не самое лучшее решение. Больше похожее на костыли) Commented 26 февр. 2017 в 12:20
  • @Artem возможно есть и на float без обертки решение, но я его не вижу Commented 26 февр. 2017 в 12:23

Ваш ответ

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

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