Макет блока CSS - четный / нечетный?
Я работаю над интерфейсом сайта Wordpress. Планировка проектов: 2 проекта в строке. Первый проект шириной 2/3, второй - 1/3 ширины, третий - тоже 1/3, четвертый - 2/3. Количество проектов может быть неограниченное, но последний проект всегда имеет 100% ширину.
Можно ли это сделать, используя только CSS? Я подумал о: nth-child (нечетное) и: nth-child (четное). Но иногда коэффициент составляет 2/3, а иногда и другой ...
Спасибо за вашу помощь.
@TemaniAfif Я бы не стал отмечать это как дубликат, потому что последний элемент должен иметь 100% ширину.
@ dennis-perremans Если последний проект всегда имеет 100% ширину и есть четное количество плиток, то ширина последних двух будет 100%?
@shirfy Я не отмечал как дубликат;) Я просто прокомментировал как возможный дубликат, чтобы он получил некоторое представление ... вы можете заметить, что у меня есть Gold CSS, поэтому, если я был уверен в этом, он немедленно закроется :)
@shirfy, если есть четное количество плиток, не будет последней ширины 100%. Только при нечетном количестве плиток последняя должна быть 100%.
Ответы 2
Попробуйте использовать следующую структуру, чтобы создать желаемый макет.
.container div {
width:100px;
height:100px;
display: inline-block;
border:solid 1px blue;
margin:5px;
}
.container section {
width:100%;
display:flex;
}
.container section:nth-child(odd) > div:nth-child(even) {
width:75%;
}
.container section:nth-child(odd) > div:nth-child(odd) {
width:24%;
}
.container section:nth-child(even) > div:nth-child(odd) {
width:75%;
}
.container section:nth-child(even) > div:nth-child(even) {
width:24%;
}
.container section:last-child > div:nth-child(1) {
border: solid 1px red !important;
width:100%;
}<div class = "container">
<section>
<div> 1 </div>
<div> 2 </div>
</section>
<section>
<div> 3 </div>
<div> 4 </div>
</section>
<section> <div> 5 </div> </section>
</div>@SuperDJ Невозможно разместить разделы вокруг каждых 2 элементов.
@DennisPerremans, это не мой ответ, я только отредактировал ответ. Они не обязательно должны быть разделами. Они также могут быть любым элементом с определенным классом. SO не всегда будет давать вам ответы на вопросы копирования и вставки. Некоторые дадут вам только указатели на правильный ответ
@DennisPerremans Я добавил еще один ответ, посмотрите, решит ли он вашу проблему.
Здесь вы идете без разделов / внешних элементов:
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
width: 100px;
height: 100px;
display: inline-block;
border: solid 1px blue;
margin: 5px;
width: 24%;
}
.container div:nth-child(2n),
.container div:nth-child(3n) {
width: 73%;
}
.container div:nth-child(2n+3) {
width: 73%;
}
.container div:nth-child(4n),
.container div:nth-child(4n+1) {
width: 24%;
}
.container div:last-child {
border: solid 1px red !important;
width: 100%;
}<div class = "container">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
<div> 7 </div>
<div> 8 </div>
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
<div> 7 </div>
<div> 8 </div>
<div> Last </div>
</div>
возможный дубликат: stackoverflow.com/questions/50541486/…