Вопрос:
Надеюсь, этот образ объяснит, что я пытаюсь сделать… в CSS…
Мне удалось завершить почти все это. Вот скрипка, показывающая то, что у меня есть до сих пор… К сожалению, я не могу поместить квадраты бок о бок (попробовал float), и вместо этого они появляются в вертикальном столбце.
Какие-либо предложения?
HTML…
<div class=»content-container»> <div class=»inner-square»><img src=»http://placehold.it/230×230″></div> <div class=»inner-square»><img src=»http://placehold.it/230×230″></div> <div class=»inner-square»><img src=»http://placehold.it/230×230″></div> <div class=»inner-square»><img src=»http://placehold.it/230×230″></div> </div>
CSS…
.content-container { max-width: 570px; height: auto; border-radius: 10px; border-top: 50px solid #e81354; background: #ffffff; display: block; } .inner-square { background: #cccccc; width: 50%; height: 50%; margin: 5px; } Лучший ответ:
Ваша проблема заключается в том, что вы устанавливаете width 50% но не минус 10px маржа, также ваш HTML-код имеет разрывы строк между div s, поэтому вы должны установить font-size 4px 0 для контейнера (чтобы исключить 4px строки ломать):
.content-container { … font-size:0; } .inner-square { background: #cccccc; width: calc(50% — 8px); height: calc(50% — 8px); margin: 5px; display:inline-block; } .inner-square:nth-child(even) { margin-left:0; } .inner-square:nth-child(n+2) { margin-top:0; }
Demo.
Ответ №1
Две проблемы:
- Вам нужно добавить float:left to .inner-square.
- Ваши квадраты не принимают форму, которую вы хотите, потому что у вас есть margin: 5px на .inner-square. Таким образом, ваши .inner-square ширины в настоящее время 50% + 50% + (4 * 5px). Поскольку они больше ширины вашего квадрата, второй квадрат занимает следующее свободное пространство: пространство под ним. Итак, попробуйте margin: 5px 0 и ваша проблема исчезнет.
Ответ №2
Я нашел этот код, выстроил их лучше, я бы поместил стиль в css в финальной копии tho <div class=»content-container»style=»position:absolute;»> <div class=»inner-square»><img src=»http://placehold.it/230×230″></div> <div class=»inner-square»><img src=»http://placehold.it/230×230″></div> <div class=»inner-square»style=»float:right;margin-top:-478px;»><img src=»http://placehold.it/230×230″></div> <div class=»inner-square»style=»float:right;margin-top:-239px;»><img src=»http://placehold.it/230×230″></div>
</div> <div class=»content-container»style=»position:absolute;»> <div class=»inner-square»><img src=»http://placehold.it/230×230″></div> <div class=»inner-square»><img src=»http://placehold.it/230×230″></div> <div class=»inner-square»style=»float:right;margin-top:-478px;»><img src=»http://placehold.it/230×230″></div> <div class=»inner-square»style=»float:right;margin-top:-239px;»><img src=»http://placehold.it/230×230″></div>
</div>
