Макет CSS-боксов
Я пытаюсь создать коробки рядом друг с другом, но не уверен, что мне не хватает или что я ошибаюсь? Я пробовал атрибуты границ, но, похоже, они не работают должным образом, и я хотел бы, чтобы вертикальные линии были прикреплены к горизонтальным линиям, а содержимое ящиков было одинаково расположено, как показано на снимке экрана с веб-сайта Balenciaga.
Нижний колонтитул веб-сайта Balenciaga
* {
box-sizing: border-box;
color: #000;
margin: inherit;
}
html {
background-color: #dee1ec;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
body {}
a {
text-decoration: none;
}
.header {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.christianmeloni {
display: inline-block;
padding-left: 12px;
}
.menu {
display: inline-block;
float: right;
padding-right: 12px;
}
.work:hover,
.about:hover,
.contact:hover {
text-decoration: underline;
}
.content {
margin-bottom: 12px;
margin-top: 12px;
padding-left: 12px;
padding-right: 12px;
}
.mission {}
.band {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 22px;
padding-top: 22px;
}
.brand {
border-right: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-right: 12px;
width: 20%;
}
.experience {
border-right: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.innovation {
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.engagement {
border-left: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.strategy {
border-left: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
width: 20%;
}
.footer {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.credit {
display: inline-block;
padding-left: 12px;
}
.follow {
display: inline-block;
float: right;
padding-right: 12px;
}
.credit:hover,
.facebook:hover,
.twitter:hover,
.instagram:hover {
text-decoration: underline;
}<header class = "header">
<div class = "christianmeloni">
<span>
<a href = "#">CHRISTIAN MELONI</a>
</span>
</div>
<div class = "menu">
<span>
<a class = "work" href = "#">Work</a>
<a class = "about" href = "#">About</a>
<a class = "contact" href = "#">Contact</a>
</span>
</div>
</header>
<div class = "content">
<div class = "mission">
<div>
Transforming businesses by developing original products, services and experiences. Disruptive thinking for ambitious brands. Challenge the ordinary, to achieve the extraordinary. We’re always in motion.
</div>
<div>
Our experience is that working collaboratively produces the best results.
</div>
<div>
Known for a collaborative, problem-solving approach to design, with personal involvement by all principals in every project and continuous attention to the details. We’re a global brand and innovation consultancy. We help ambitious leaders define compelling
brand strategies, design powerful brand experiences and innovate new brand-led products and services. We challenge ourselves and our clients to push boundaries. We are a design and innovation company. We work with forward-looking companies to shape
modern brands for a purpose-driven future. Founded with a simple but compelling vision: to build a brand consultancy as strong in its strategic thinking as it was in its creativity. We can’t help but tell it how it is. We know the rules and know
when and how to break them. We have firm beliefs, big ideas, strong convictions. We look inside for ideas and outside for inspiration. We like to challenge and be challenged, to teach and be taught. We take our craft seriously – ourselves less so.
We play music by ear, we follow our intuition. This is our nature, our essence. We have a strong ‘one-office’ philosophy and operating model. Our global team of strategists, designers and programme managers work as one coherent team across our different
locations in order to bring the best of our knowledge, skills and experience to every one of our clients wherever they are in the world. We come from many different places, speak many different languages and bring diverse skills and perspectives.
But we operate as one office, bringing the best regardless of where we (or you) are.
</div>
</div>
</div>
<div class = "band"></div>
<div class = "content">
<div class = "brand">
<div>
BRAND
</div>
<div>
Disruptive thinking starts with a great story. We help leaders discover and define the most powerful and authentic brand narrative that will inspire their people, engage their customers and disrupt their markets. We help them develop a concise set of
bold and innovative initiatives that challenge the status quo and make the brand vision a reality.
</div>
</div>
<div class = "experience">
<div>
EXPERIENCE
</div>
<div>
Disruptive thinking delivers great customer experiences. We design powerful, creative and engaging brand experiences, online and offline, that challenge people to think, feel and behave differently towards the brand and turn passive customers into passionate
brand advocates.
</div>
</div>
<div class = "innovation">
<div>
INNOVATION
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class = "engagement">
<div>
ENGAGEMENT
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class = "strategy">
<div>
STRATEGY
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
</div>
<footer class = "footer">
<div class = "credit">
<span>
<a href = "#">© 2017 Christian Meloni</a>
</span>
</div>
<div class = "follow">
<span>
<a class = "facebook" href = "https://www.facebook.com/christianmelonicom/">Facebook</a>
<a class = "twitter" href = "#">Twitter</a>
<a class = "instagram" href = "#">Instagram</a>
</span>
</div>
</footer>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
135
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Вместо того, чтобы полагаться на display: inline-block, который заставляет элементы выравниваться по базовой линии, вы можете вместо этого использовать CSS flexbox. Преимущество использования flexbox заключается в том, что каждый элемент будет растянут до высоты своего родительского контейнера (больше никаких уродливых хаков с одинаковой высотой), и это очень легко реализовать:
.content {
padding-left: 12px;
padding-right: 12px;
display: flex; // This is what you really need
}
// This is just to give the individual columns sufficient space at the top and bottom
.content > div {
padding-top: 12px;
padding-bottom: 12px;
}
И просто удалите все min-height и display: inline-block из прямых потомков элемента <div class = "content">, и все готово.
См. Доказательство концепции ниже:
* {
box-sizing: border-box;
color: #000;
margin: inherit;
}
html {
background-color: #dee1ec;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
body {
}
a {
text-decoration: none;
}
.header {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.christianmeloni {
display: inline-block;
padding-left: 12px;
}
.menu {
display: inline-block;
float: right;
padding-right: 12px;
}
.work:hover, .about:hover, .contact:hover {
text-decoration: underline;
}
.content {
padding-left: 12px;
padding-right: 12px;
display: flex;
}
.content > div {
padding-top: 12px;
padding-bottom: 12px;
}
.band {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 22px;
padding-top: 22px;
}
.brand {
border-right: 1px solid #000;
padding-right: 12px;
width: 20%;
}
.experience {
border-right: 1px solid #000;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.innovation{
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.engagement{
border-left: 1px solid #000;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.strategy{
border-left: 1px solid #000;
padding-left: 12px;
width: 20%;
}
.footer {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.credit {
display: inline-block;
padding-left: 12px;
}
.follow {
display: inline-block;
float: right;
padding-right: 12px;
}
.credit:hover, .facebook:hover, .twitter:hover, .instagram:hover {
text-decoration: underline;
}<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Christian Meloni</title>
<link href = "christianmeloni.css" rel = "stylesheet">
<link href = "christianmeloni.ico" rel = "icon">
</head>
<body>
<header class = "header">
<div class = "christianmeloni">
<span>
<a href = "#">CHRISTIAN MELONI</a>
</span>
</div>
<div class = "menu">
<span>
<a class = "work" href = "#">Work</a>
<a class = "about" href = "#">About</a>
<a class = "contact" href = "#">Contact</a>
</span>
</div>
</header>
<div class = "content">
<div class = "mission">
<div>
Transforming businesses by developing original products, services and experiences.
Disruptive thinking for ambitious brands.
Challenge the ordinary, to achieve the extraordinary.
We’re always in motion.
</div>
<div>
Our experience is that working collaboratively produces the best results.
</div>
<div>
Known for a collaborative, problem-solving approach to design, with personal involvement by all principals in every project and continuous attention to the details.
We’re a global brand and innovation consultancy.
We help ambitious leaders define compelling brand strategies, design powerful brand experiences and innovate new brand-led products and services.
We challenge ourselves and our clients to push boundaries.
We are a design and innovation company. We work with forward-looking companies to shape modern brands for a purpose-driven future.
Founded with a simple but compelling vision: to build a brand consultancy as strong in its strategic thinking as it was in its creativity.
We can’t help but tell it how it is. We know the rules and know when and how to break them. We have firm beliefs, big ideas, strong convictions. We look inside for ideas and outside for inspiration. We like to challenge and be challenged, to teach and be taught. We take our craft seriously – ourselves less so. We play music by ear, we follow our intuition.
This is our nature, our essence.
We have a strong ‘one-office’ philosophy and operating model. Our global team of strategists, designers and programme managers work as one coherent team across our different locations in order to bring the best of our knowledge, skills and experience to every one of our clients wherever they are in the world.
We come from many different places, speak many different languages and bring diverse skills and perspectives. But we operate as one office, bringing the best regardless of where we (or you) are.
</div>
</div>
</div>
<div class = "band"></div>
<div class = "content">
<div class = "brand">
<div>
BRAND
</div>
<div>
Disruptive thinking starts with a great story. We help leaders discover and define the most powerful and authentic brand narrative that will inspire their people, engage their customers and disrupt their markets. We help them develop a concise set of bold and innovative initiatives that challenge the status quo and make the brand vision a reality.
</div>
</div>
<div class = "experience">
<div>
EXPERIENCE
</div>
<div>
Disruptive thinking delivers great customer experiences. We design powerful, creative and engaging brand experiences, online and offline, that challenge people to think, feel and behave differently towards the brand and turn passive customers into passionate brand advocates.
</div>
</div>
<div class = "innovation">
<div>
INNOVATION
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably successful.
The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile.
We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class = "engagement">
<div>
ENGAGEMENT
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably successful.
The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile.
We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class = "strategy">
<div>
STRATEGY
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably successful.
The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile.
We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
</div>
<footer class = "footer">
<div class = "credit">
<span>
<a href = "#">© 2017 Christian Meloni</a>
</span>
</div>
<div class = "follow">
<span>
<a class = "facebook" href = "https://www.facebook.com/christianmelonicom/">Facebook</a>
<a class = "twitter" href = "#">Twitter</a>
<a class = "instagram" href = "#">Instagram</a>
</span>
</div>
</footer>
</body>
</html>Спасибо, Терри, очень четкий ответ. Я очень признателен за вашу помощь.
—
19.04.2018 15:36
Я редактировал твой снайпер.
Я использовал display: flex; на .content
Удалены margin и padding, чтобы размещать их на коробках (.subContent)
* {
box-sizing: border-box;
color: #000;
margin: inherit;
}
html {
background-color: #dee1ec;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
body {}
a {
text-decoration: none;
}
.header {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.christianmeloni {
display: inline-block;
padding-left: 12px;
}
.menu {
display: inline-block;
float: right;
padding-right: 12px;
}
.work:hover,
.about:hover,
.contact:hover {
text-decoration: underline;
}
.content {
margin-bottom: 12px;
margin-top: 12px;
padding-left: 12px;
padding-right: 12px;
}
.mission {}
.band {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 22px;
padding-top: 22px;
}
.brand {
border-right: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-right: 12px;
width: 20%;
}
.experience {
border-right: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.innovation {
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.engagement {
border-left: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
padding-right: 12px;
width: 20%;
}
.strategy {
border-left: 1px solid #000;
display: inline-block;
min-height: 320px;
padding-left: 12px;
width: 20%;
}
.footer {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
padding-bottom: 16px;
padding-top: 16px;
}
.credit {
display: inline-block;
padding-left: 12px;
}
.follow {
display: inline-block;
float: right;
padding-right: 12px;
}
.credit:hover,
.facebook:hover,
.twitter:hover,
.instagram:hover {
text-decoration: underline;
}
.content {
margin: 0;
padding: 0;
display: flex;
}
.subContent {
padding : 12px;
}<header class = "header">
<div class = "christianmeloni">
<span>
<a href = "#">CHRISTIAN MELONI</a>
</span>
</div>
<div class = "menu">
<span>
<a class = "work" href = "#">Work</a>
<a class = "about" href = "#">About</a>
<a class = "contact" href = "#">Contact</a>
</span>
</div>
</header>
<div class = "content">
<div class = "subContent mission">
<div>
Transforming businesses by developing original products, services and experiences. Disruptive thinking for ambitious brands. Challenge the ordinary, to achieve the extraordinary. We’re always in motion.
</div>
<div>
Our experience is that working collaboratively produces the best results.
</div>
<div>
Known for a collaborative, problem-solving approach to design, with personal involvement by all principals in every project and continuous attention to the details. We’re a global brand and innovation consultancy. We help ambitious leaders define compelling
brand strategies, design powerful brand experiences and innovate new brand-led products and services. We challenge ourselves and our clients to push boundaries. We are a design and innovation company. We work with forward-looking companies to shape
modern brands for a purpose-driven future. Founded with a simple but compelling vision: to build a brand consultancy as strong in its strategic thinking as it was in its creativity. We can’t help but tell it how it is. We know the rules and know
when and how to break them. We have firm beliefs, big ideas, strong convictions. We look inside for ideas and outside for inspiration. We like to challenge and be challenged, to teach and be taught. We take our craft seriously – ourselves less so.
We play music by ear, we follow our intuition. This is our nature, our essence. We have a strong ‘one-office’ philosophy and operating model. Our global team of strategists, designers and programme managers work as one coherent team across our different
locations in order to bring the best of our knowledge, skills and experience to every one of our clients wherever they are in the world. We come from many different places, speak many different languages and bring diverse skills and perspectives.
But we operate as one office, bringing the best regardless of where we (or you) are.
</div>
</div>
</div>
<div class = "band"></div>
<div class = "content">
<div class = "subContent brand">
<div>
BRAND
</div>
<div>
Disruptive thinking starts with a great story. We help leaders discover and define the most powerful and authentic brand narrative that will inspire their people, engage their customers and disrupt their markets. We help them develop a concise set of
bold and innovative initiatives that challenge the status quo and make the brand vision a reality.
</div>
</div>
<div class = "subContent experience">
<div>
EXPERIENCE
</div>
<div>
Disruptive thinking delivers great customer experiences. We design powerful, creative and engaging brand experiences, online and offline, that challenge people to think, feel and behave differently towards the brand and turn passive customers into passionate
brand advocates.
</div>
</div>
<div class = "subContent innovation">
<div>
INNOVATION
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class = "subContent engagement">
<div>
ENGAGEMENT
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
<div class = "subContent strategy">
<div>
STRATEGY
</div>
<div>
Disruptive thinking requires innovation. We work closely with our clients to develop new brands, products and services that are rooted in, and bring to life, what makes them special. We think it’s this kind of brand-led innovation that proves sustainably
successful. The smartest thinkers come to us to collaborate with each other. Designers, strategists, writers, makers, innovators, and dreamers—together we keep brands agile. We build some of the world’s most agile brands—brands that thrive on change.
</div>
</div>
</div>
<footer class = "footer">
<div class = "credit">
<span>
<a href = "#">© 2017 Christian Meloni</a>
</span>
</div>
<div class = "follow">
<span>
<a class = "facebook" href = "https://www.facebook.com/christianmelonicom/">Facebook</a>
<a class = "twitter" href = "#">Twitter</a>
<a class = "instagram" href = "#">Instagram</a>
</span>
</div>
</footer>Другие вопросы по теме
Проблема с изменением размера фонового изображения CSS на мобильном устройстве
React Big Calendar, как оформить отдельный день в просмотре месяца
Трудно настроить таргетинг на <img> с помощью: nth-child ()
Как создать горизонтальный список ul в сетке CSS?
HTML, CSS: я пытаюсь центрировать кнопку на своей странице
Node-sass, медиа-запросы и каскадирование
Удалить нижнее поле на изображении в описании продукта с помощью CSS?
Проблема с эффектами наведения при использовании разных браузеров
Fonts / ionicons.ttf? v = 2.0.0 404 (не найдено) - CSS- Anuglar - локальный хост
Boostrap 4.1. Панель навигации
Похожие вопросы
Проблема с изменением размера фонового изображения CSS на мобильном устройстве
Как создать горизонтальный список ul в сетке CSS?
Как открыть страницу Jsp, предназначенную для HTML-файла, в действии формы на той же странице Html?
Как сделать цвет прозрачным на холсте HTML?
HTML, CSS: я пытаюсь центрировать кнопку на своей странице
Несоответствие всплывающей подсказки Firefox (если указан большой текст)
Проблема с эффектами наведения при использовании разных браузеров
Angular 4: привяжите два компонента HTML с одинаковым значением
Fonts / ionicons.ttf? v = 2.0.0 404 (не найдено) - CSS- Anuglar - локальный хост
Boostrap 4.1. Панель навигации
Почему вы не используете display: flex? И все ваши проблемы решат. Просто добавьте display: flex к классу .content и flex: 1 ко всем дочерним элементам.