CSS, адаптивный, плавающие блоки складываются

Я хочу создать адаптивный макет, в котором есть два столбца, левый и правый. На небольших экранах поля слева должны перемещаться в определенные позиции. Это прекрасно работает с моим кодом, но проблема в том, что на больших экранах между прямоугольниками справа есть зазор.

Как я могу это решить?

Идея и проблема

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

JSFIDDLE

Когда вы посмотрите на следующий jsfiddle, вы увидите, что он работает для маленького экрана, но проблемы не возникают на большом экране. Я знаю, что делаю это неправильно, но как я могу получить желаемый результат с помощью CSS?

http://jsfiddle.net/7rnum9xk/

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
    float:left;
}
.small{
    width:35%;
    height:25px;
    float:left;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }    
}

html css responsive-design
person NLAnaconda    schedule 11.09.2014    source источник
comment
попробуйте заглянуть в .clearfix   -  person mabdrabo    schedule 11.09.2014
comment
имеют ли цветные элементы фиксированную высоту?   -  person web-tiki    schedule 11.09.2014
comment
Нет, каждый элемент имеет динамическую высоту. Большие и маленькие коробки.   -  person NLAnaconda    schedule 11.09.2014

Ответы (2)


arrow_upward
13
arrow_downward

попробуйте этот код DEMO

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
   float:left; 
    display: inline-block;
}
.small{
    width:35%;
    height:25px;
    /* float:left; */
    display:inline-block;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }

}

/* colors */
.main{background:#d0d0d0;}
.orange{background:#ecbd00;}
.green{background:#6aec00;}
.blue{background:#00c8ec;}
.purple{background:#c300ec;}
.red{background:#e93a73;}
person Alex Wilson    schedule 11.09.2014
comment
Ваху! На первый взгляд вы кажетесь героем дня! - person NLAnaconda; 11.09.2014
comment
это хорошо, +1 просто убедитесь, что цветные элементы всегда меньше серых: jsfiddle.net /webtiki/7rnum9xk/11 - person web-tiki; 11.09.2014
comment
Отлично, но было бы неплохо, если бы вы указали, что вы изменили, чтобы добиться желаемого вида. - person Gigili; 16.02.2021
comment
@web-tiki можно ли что-нибудь сделать, если цветные элементы иногда больше серых? - person Trylks; 01.04.2021
comment
Я нашел связанный вопрос и смог сделать что-то, что наполовину работает, здесь, использование двух div для двух столбцов упростило бы задачу, но это не вариант. Интересно, что пробелы в правой колонке для меня не проблема. - person Trylks; 01.04.2021
comment
возможно, это. Я понятия не имею, что делаю ¯\_(ツ)_/¯ - person Trylks; 01.04.2021

arrow_upward
-1
arrow_downward

Проблема в структуре html, вы поместили основной div после каждого в маленькие div. Итак, сначала он напечатает этот div.

Я бы предложил изменить структуру html следующим образом:

поместить левый столбец влево, а правый столбец вправо.

Затем поместите вокруг div вокруг

добавьте media css, чтобы при разрешении 800 пикселей (или любом другом, что вам нужно) вы могли display none; на .hide800 это скрыть div, затем добавить div вокруг вашего текущего html, но добавить встроенный стиль отображения none. Затем при 800px (или любом другом размере, который вы скрываете первый div) добавьте css в display: block !Important;

Таким образом, он будет работать так, как вам нужно для полноэкранных браузеров, но затем, когда экран достаточно мал, чтобы изменить структуру, вы можете использовать свой текущий код.

html;

<div class="hide800">
    <div class="left-col">
    <div class="main">
    </div>
    <div class="main">
    </div>
    <div class="main">
    </div>
    </div>
    <div class-right-col">
    <div class="small orange">
    </div>
    <div class="small green">
    </div>
    <div class="small blue">
    </div>
    <div class="small purple">
    </div>
    <div class="small red">
    </div>
    </div>
</div>
<div class="show800" style="display:none;">
<div class="main">
</div>
<div class="small orange">
</div>
<div class="small green">
</div>

<div class="main">
</div>
<div class="small blue">
</div>
<div class="small purple">
</div>

<div class="main">
</div>
<div class="small red">
</div>
</div>

CSS;

.left-col {
float: left;
}
.right-col {
float: right;
}
@media screen and(max-width:800px){
.hide800 {
display: none;
}
.show800 {
display: block !Important;
}
}

Если вам нужно, чтобы я объяснил дальше, дайте мне знать :)

person Jay    schedule 11.09.2014
comment
Но это означает, что я должен генерировать каждый маленький элемент дважды? Один раз для элементов show800 и один раз для элементов hide800? (поправьте меня, если я ошибаюсь) Я надеялся получить решение, которое не требует создания двойного контента. - person NLAnaconda; 11.09.2014
comment
Я думаю, что дублирование контента тоже нехорошо. Я в похожей ситуации. А как насчет таких библиотек, как изотоп? - person Michal Holub; 11.09.2014
comment
Хорошо, не проблема, извините, я не мог больше помочь. - person Jay; 11.09.2014