Вопрос по html, css – CSS плавающие пустые места

5

У меня есть несколько div в упаковке, они имеют разную высоту. Я бы хотел проплыть налево. 2 деления могут поместиться в ряд. Но поскольку каждый элемент div имеет разную высоту, в следующем ряду остается довольно много странного пространства. Могу ли я убрать пробел и переместить div вверх?

Пожалуйста, посмотрите на изображение:

Here's code:

<div class="wrap">
    <div class="box1">Box1 with less height.</div>
    <div class="box2">Box2 with more height.</div>
    <div class="box3">Box3 with whatever height.</div>
</div>

CSS:

.wrap{
    width:410px;
    border:1px solid red;
    overflow:hidden;
}

.box1{
    width:200px;
    height:50px;
    float:left;
    border:1px solid green;
}

.box2{
    width:200px;
    height:150px;
    float:left;
    border:1px solid blue;
}

.box3{
    width:200px;
    height:250px;
    float:left;
    border:1px solid blue;
}

JSFiddle: http://jsfiddle.net/NsH5M/

PS. Высота div не фиксирована. Это только для примера. Edit: Sorry, I should have mentioned that its not possible to edit markup.

enter image description here

это действительно невозможно, используя только CSS и HTML. что бы вы были открыты для использования плагина jQuery, такого какmasonry? Joseph Marikle

Ваш Ответ

7   ответов
2

float:right в.box2 Напишите так:

.box2{
    width:200px;
    height:150px;
    float:right;
    border:1px solid blue;
}

Проверь этоhttp://jsfiddle.net/NsH5M/2/

0

Изотоп может сделать это для вас, используя макет кладки.

1

вы можете обернуть box1 и box3 в перемещаемый контейнер:

http://jsfiddle.net/NsH5M/3/

Вы также можете плавать: направьте ваш бокс3, но это немного изменит результат (между полями, плавающими слева и справа, будет разрыв), что может не быть проблемой в зависимости от вашего дизайна.

7

кирпичная кладка, Это должно помочь вам организовать ваш div без пустого места.

Вот как он используется в качестве примера вашего кода:jsfiddle (Обновлено 11/2018)

HTML:

<div class="wrap">
    <div class="box box1">Box1 with less height.</div>
    <div class="box box2">Box2 with more height.</div>
    <div class="box box3">Box3 with whatever height.</div>
</div>

JavaScript:

$(function(){
  $('.wrap').masonry({
      // options
    itemSelector : '.box'
  });
});​
​

И CSS:

.wrap{
    width:410px;
    border:1px solid red;
    overflow:hidden;

}

.box{
    float: left;
    width: 200px;
}

.box1{
    height:50px;
    border:1px solid green;
}

.box2{
    height:150px;
    border:1px solid blue;
}

.box3{
    height:250px;
    border:1px solid blue;
}
JsFiddle выглядитexactly как скриншот в исходном вопросе в Chrome 69, таким образом, это не работает должным образом здесь.
Я обновил пакеты и зависимости в вашем jsFiddle. Это работает сейчас:jsfiddle.net/NsH5M/123
2

right для элементов, которые вы хотите справа. В этом случае:

.box2{
width:200px;
height:150px;
float:right;
border:1px solid blue;
}

Ваш jsfiddle обновленВот

Вы бы этого не сделали, если бы подготовили свой сайт для переменной ширины. Так что это не на 100% безопасно для использования. Смотрите jsFiddle-Forkjsfiddle.net/g3jv9ez5
1

что это сработает, но вы можете попробовать использовать поле 1 и поле 3 слева и поле 2 справа

РЕДАКТИРОВАТЬ: работает в Firefoxhttp://jsfiddle.net/NsH5M/1/

0

И так как здесь это так, правильное решение будет следующим:

(это код jQuery, но, очевидно, это можно сделать, если добавить несколько слов в чистом JS)

В моем случае это "add-info" был назначен всем элементам в контейнере. То, что вы делаете, просто проверяет, должен ли следующий элемент перемещаться влево или вправо. Не используйте сложные сценарии для всего. Половина людей имеет доступ к сети с мобильного телефона, и количество мобильных данных ограничено.

function contactFloats() {
    var leftCounter = 0;
    var rightCounter = 0;
    $('.add-info').each(function(){
            if(leftCounter <= rightCounter){
                $(this).css('float', 'left');
                leftCounter += $(this).outerHeight();
            }else{
                $(this).css('float', 'right');
                rightCounter += $(this).outerHeight();
            }
    });
}

Похожие вопросы