Как мне сделать этот макет CSS?

Я хочу поставить .e div в .second div на 50%. Моя цель - избавиться от пробела между двумя .e divs.Как мне сделать этот макет CSS?

Я хочу сделать это без явного перемещения div вверх (например, position: relative; top: -50%;). Я заметил, что делать float: right; на .first div исправляет проблему макета, но уничтожает порядок содержимого HTML.

Вот картина того, что я пытаюсь сделать: enter image description here

Как я могу сделать эту работу, сохраняя свой HTML в том же порядке?

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
h1, h2, h3, h4, h5, h6 { 
 
    margin: 0; 
 
} 
 

 
body { 
 
    font-family: 'Montserrat', Helvetica, Arial, sans-serif; 
 
} 
 
body .a { 
 
    background: #f04576; 
 
} 
 
body .b { 
 
    background: #53a2e3; 
 
} 
 
body .c { 
 
    background: #ef4658; 
 
    text-align: right; 
 
} 
 
body .d { 
 
    background: #f4ad49; 
 
    text-align: left; 
 
} 
 
body .e { 
 
    background: #69de92; 
 
} 
 
body .first { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body .second { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body .tall:nth-child(2n) { 
 
    position: relative; 
 
    top: -50%; 
 
} 
 
body .tall, body .long, body .square { 
 
    float: left; 
 
} 
 
body .tall { 
 
    height: calc(100% - 4rem); 
 
    width: calc(25% - 4rem); 
 
    padding: 2rem; 
 
    font-size: 2.5rem; 
 
    text-transform: uppercase; 
 
} 
 
body .long { 
 
    height: calc(50% - 4rem); 
 
    width: calc(50% - 4rem); 
 
    padding: 2rem; 
 
    font-size: 2.5rem; 
 
    text-transform: uppercase; 
 
} 
 
body .square { 
 
    height: calc(50% - 4rem); 
 
    width: calc(25% - 4rem); 
 
    padding: 2rem; 
 
    font-size: 2.5rem; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
}

<div class='first'> 
 
    <div class='a tall'>A</div> 
 
    <div class='c square'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d long'>D</div> 
 
    <div class='e square'>E</div> 
 
</div> 
 
<div class='second'> 
 
    <div class='a square'>A</div> 
 
    <div class='c long'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d square'>D</div> 
 
    <div class='e tall'>E</div> 
 
</div>

Edit 1: Я не хочу делать position: relative; top: -50%;, потому что если я повторю свой HTML, я остался с огромным зазором после каждого .second дел. Вот пример:

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    margin: 0; 
 
} 
 

 
body { 
 
    font-family: 'Montserrat', Helvetica, Arial, sans-serif; 
 
} 
 

 
body .a { 
 
    background: #f04576; 
 
} 
 

 
body .b { 
 
    background: #53a2e3; 
 
} 
 

 
body .c { 
 
    background: #ef4658; 
 
    text-align: right; 
 
} 
 

 
body .d { 
 
    background: #f4ad49; 
 
    text-align: left; 
 
} 
 

 
body .e { 
 
    background: #69de92; 
 
} 
 

 
body .first { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body .second { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body .tall:nth-child(2n) { 
 
    position: relative; 
 
    top: -50%; 
 
} 
 

 
body .tall, 
 
body .long, 
 
body .square { 
 
    float: left; 
 
} 
 

 
body .tall { 
 
    height: calc(100% - 4rem); 
 
    width: calc(25% - 4rem); 
 
    padding: 2rem; 
 
    font-size: 2.5rem; 
 
    text-transform: uppercase; 
 
} 
 

 
body .long { 
 
    height: calc(50% - 4rem); 
 
    width: calc(50% - 4rem); 
 
    padding: 2rem; 
 
    font-size: 2.5rem; 
 
    text-transform: uppercase; 
 
} 
 

 
body .square { 
 
    height: calc(50% - 4rem); 
 
    width: calc(25% - 4rem); 
 
    padding: 2rem; 
 
    font-size: 2.5rem; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
}

<div class='first'> 
 
    <div class='a tall'>A</div> 
 
    <div class='c square'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d long'>D</div> 
 
    <div class='e square'>E</div> 
 
</div> 
 
<div class='second'> 
 
    <div class='a square'>A</div> 
 
    <div class='c long'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d square'>D</div> 
 
    <div class='e tall'>E</div> 
 
</div> 
 
<!-- Repeating the code --> 
 
<div class='first'> 
 
    <div class='a tall'>A</div> 
 
    <div class='c square'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d long'>D</div> 
 
    <div class='e square'>E</div> 
 
</div> 
 
<div class='second'> 
 
    <div class='a square'>A</div> 
 
    <div class='c long'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d square'>D</div> 
 
    <div class='e tall'>E</div> 
 
</div>

источник

2017-02-21 Deep Duggal

Почему вы не хотите использовать позиционирование? –

Разрыв остается после каждого .секундного div, если я повторяю свой HTML. –

Мое решение исправляет это. Повторяется 8 раз и пробелов нет. –

Вы должны изменить этот код:

body .tall:nth-child(2n) { 
    position: relative; 
    top: -50%; 
}

body .second .tall { 
    position: relative; 
    top: -50%; 
}

или к

body .second .tall { 
    position: absolute; 
    right: 0; 
}

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
h1, h2, h3, h4, h5, h6 { 
 
    margin: 0; 
 
} 
 

 
body { 
 
    font-family: 'Montserrat', Helvetica, Arial, sans-serif; 
 
} 
 
body .a { 
 
    background: #f04576; 
 
} 
 
body .b { 
 
    background: #53a2e3; 
 
} 
 
body .c { 
 
    background: #ef4658; 
 
    text-align: right; 
 
} 
 
body .d { 
 
    background: #f4ad49; 
 
    text-align: left; 
 
} 
 
body .e { 
 
    background: #69de92; 
 
} 
 
body .first { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body .second { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body .second .tall { 
 
    position: absolute; 
 
    right: 0; 
 
} 
 
body .tall, body .long, body .square { 
 
    float: left; 
 
} 
 
body .tall { 
 
    height: calc(100% - 4rem); 
 
    width: calc(25% - 4rem); 
 
    padding: 2rem; 
 
    font-size: 2.5rem; 
 
    text-transform: uppercase; 
 
} 
 
body .long { 
 
    height: calc(50% - 4rem); 
 
    width: calc(50% - 4rem); 
 
    padding: 2rem; 
 
    font-size: 2.5rem; 
 
    text-transform: uppercase; 
 
} 
 
body .square { 
 
    height: calc(50% - 4rem); 
 
    width: calc(25% - 4rem); 
 
    padding: 2rem; 
 
    font-size: 2.5rem; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
}

<div class='first'> 
 
    <div class='a tall'>A</div> 
 
    <div class='c square'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d long'>D</div> 
 
    <div class='e square'>E</div> 
 
</div> 
 
<div class='second'> 
 
    <div class='a square'>A</div> 
 
    <div class='c long'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d square'>D</div> 
 
    <div class='e tall'>E</div> 
 
</div> 
 
<!-- Repeating the code --> 
 
<div class='first'> 
 
    <div class='a tall'>A</div> 
 
    <div class='c square'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d long'>D</div> 
 
    <div class='e square'>E</div> 
 
</div> 
 
<div class='second'> 
 
    <div class='a square'>A</div> 
 
    <div class='c long'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d square'>D</div> 
 
    <div class='e tall'>E</div> 
 
</div> 
 

 
<div class='first'> 
 
    <div class='a tall'>A</div> 
 
    <div class='c square'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d long'>D</div> 
 
    <div class='e square'>E</div> 
 
</div> 
 
<div class='second'> 
 
    <div class='a square'>A</div> 
 
    <div class='c long'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d square'>D</div> 
 
    <div class='e tall'>E</div> 
 
</div> 
 
<!-- Repeating the code --> 
 
<div class='first'> 
 
    <div class='a tall'>A</div> 
 
    <div class='c square'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d long'>D</div> 
 
    <div class='e square'>E</div> 
 
</div> 
 
<div class='second'> 
 
    <div class='a square'>A</div> 
 
    <div class='c long'>B</div> 
 
    <div class='b long'>C</div> 
 
    <div class='d square'>D</div> 
 
    <div class='e tall'>E</div> 
 
</div>

источник

2017-02-21 19:38:36

_ «Я хочу сделать это без явного перемещения div вверх (например, position: relative; top: -50%;)» _ –

Спасибо Крису! Работает отлично. –

@DeepDuggal При всем уважении, почему вы беспокоились о том, что вам не нужно решение, которое перемещало элемент вверх, если бы вы отлично справлялись с решением, которое делает именно это? – AmericanUmlaut

Это интересная проблема. К сожалению, я считаю, что ответ на ваш вопрос с ограничениями, которые вы предоставили, заключается в том, что это невозможно.

Нет стиля CSS, который заставит элементы настраиваться вертикально, чтобы заполнить пустое пространство. Независимо от того, что вы делаете, блок C будет перенесен в следующую строку, и после него будут добавлены дополнительные блоки.

источник

2017-02-21 19:40:14 AmericanUmlaut

Возможно, вы захотите использовать flexbox. CSS Grid, вероятно, станет идеальным решением для вашей проблемы, но поскольку это не готово, макет на основе flexbox может работать лучше, чем у вас в настоящее время. Вы могли бы значительно уменьшить сложность вашего макета. Подобно тому, как частичному например:

.a { 
 
    background: #f04576; 
 
    flex: 1; 
 
} 
 
.b { 
 
    background: #53a2e3; 
 
    flex: 3; 
 
} 
 
.c { 
 
    background: #ef4658; 
 
    flex: 4; 
 
} 
 
.d { 
 
    background: #f4ad49; 
 
    flex: 1; 
 
} 
 

 
.top { 
 
    display: flex; 
 
    height:100vh; 
 
} 
 
.left { 
 
    width: 75%; 
 
    height: 100vh; 
 
} 
 
.left-top, .left-bot { 
 
    height: 50vh; 
 
    display: flex; 
 
} 
 
.e { 
 
    background: #69de92; 
 
    width: 25%; 
 
}

<div class='top'> 
 

 
    <div class="left"> 
 
    <div class="left-top"> 
 
     <div class='a '>A</div> 
 
     <div class='c '>B</div> 
 
    </div> 
 
    <div class="left-bot"> 
 
     <div class='b '>C</div> 
 
     <div class='d '>D</div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class='e'>E</div> 
 
    
 
</div>

источник

2017-02-21 20:49:43 JakeParis

Как мне сделать этот макет CSS?

ответ

Смежные вопросы