CSS: как расположить элементы div, пересекающие разделы
Я пишу очень простую стандартную целевую страницу с несколькими разделами, которые выглядят следующим образом. Это сейчас очень модно. По сути, это увеличенный заголовок раздела с большим количеством полей, большим текстом и элементом, который выглядит так, будто он находится между двумя разделами.
У меня возникли концептуальные трудности с тем, как думать о расположении карт. Карточки плавно меняют размер в зависимости от размера области просмотра, количества текста внутри них и т. д.
[![введите описание изображения][1]][1]
До сих пор я добился чего-то подобного, угадав размер карточки (около 200 пикселей) и установив верхнюю часть карточки на -200px. Это работает на моем компьютере, но на других экранах оно будет меняться, шрифты, уровень масштабирования и т. д. и т. п. У меня также есть проблема: под полями получается много пустого пространства, так как размер контейнера div рассчитывается без это смещение.
Как я могу сделать так, чтобы они всегда были идеально центрированы? Как мне убедиться, что под карточками не остается лишнего пустого пространства? Спасибо!!
<div className = "bg-tertiary text-white text-center pb-10">
<div className = "bg-secondary pb-[100px] px-10">
<h1 className = "uppercase font-black text-2xl tracking-wider pt-10 pb-10 italic">HEADER TEXT</h1>
</div>
<div className = "relative columns-4 top-[-100px] px-10">
<MainSectionCard />
<MainSectionCard />
<MainSectionCard />
<MainSectionCard />
</div>
</div>
редактировать: Спасибо @wongjn за ответ!
Ответы 2
Кажется, что верх и фон однотонные. Если это действительно так, вы можете использовать линейный градиент в качестве фона для карточек. Этот линейный градиент может заполнить цвета ровно наполовину:
tailwind.config = {
theme: {
extend: {
colors: {
secondary: 'darkblue',
tertiary: 'skyblue',
},
},
},
};<script src = "https://cdn.tailwindcss.com/3.4.1"></script>
<div class = "bg-tertiary text-white text-center pb-10">
<div class = "bg-secondary px-10">
<h1 class = "uppercase font-black text-2xl tracking-wider pt-10 pb-10 italic">HEADER TEXT</h1>
</div>
<div class = "relative columns-4 px-10 bg-gradient-to-b from-secondary from-50% to-tertiary to-50%">
<MainSectionCard class = "block h-20 bg-white">MainSectionCard</MainSectionCard>
<MainSectionCard class = "block h-20 bg-white">MainSectionCard</MainSectionCard>
<MainSectionCard class = "block h-20 bg-white">MainSectionCard</MainSectionCard>
<MainSectionCard class = "block h-20 bg-white">MainSectionCard</MainSectionCard>
</div>
</div>Вы волшебник, спасибо! Что, если верхняя часть — это картинка? Я обновил вопрос вторым :)
Если у вас есть новый вопрос, рассмотрите возможность публикации его в новом сообщении. Сообщения с вопросами на Stack Overflow должны содержать только один вопрос.
Что касается второго вопроса, я думаю, что лучше использовать margin с отрицанием.
HTML выглядит как удар:
<Hero />
<Cards class = "-mt-[100px]" />
вы можете заменить значение маржи на свое, а элементы перед картами не будут затронуты
Спасибо XRay. Но это означает установку статического значения, что, если из-за настроек специальных возможностей (шрифты установлены больше обычного) размер карты/изображения изменится?
хороший вопрос: если размер карты изменится, вы должны каждый раз менять значение поля, но вы можете использовать js для расчета высоты карты или вы можете использовать положение: относительное и TranslateY (-50%) для определения высоты карты. Если карта менялась нечасто, проще использовать статическое значение.
Белое пространство — это круто , если оно не создает фальшпол. 😊