Создайте сетку под флекс-боксом
В настоящее время я создаю целевую страницу для веб-сайта, на котором я использовал гибкий дисплей для одного раздела. Ниже этого раздела я хочу создать сетку для другого раздела, однако содержимое отображается между «гибким» содержимым, а не под ним, и я не уверен, как это исправить, чтобы содержимое отображалось ниже в другом разделе. .
Ниже приведены CSS и HTML гибкого блока, а также сетка, которую я пытаюсь добавить ниже:
.grid-container2 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
justify-content: space-around;
padding-bottom: 4rem;
}
.image1,
.image2,
.image3 {
height: 10rem;
margin: 4rem 0 0 0;
}
.image {
width: auto;
height: auto;
}
@media (max-width: 800px) {
.grid-container2 {
flex-direction: column;
}
}
.text {
font-family: Merge;
font-size: large;
}
.link {
font-family: Merge;
font-size: small;
color: black;
}
.grid-container3 {
display: grid;
grid-template-areas: 'col1 col2 col3';
}<div class = "grid-container2">
<div class = "image1">
<img class = "image" src = "images/Customer Landing Page.jpg" alt = "Customer - Make a service request">
<div class = "text">Make a service request</div>
<a class = "link" href = "">Sign up as a customer</a>
</div>
<div class = "image2">
<img class = "image" src = "images/Contractor Landing Page 2.jpg" alt = "Contractor - Decide on jobs">
<div class = "text">Decide what orders you want to fulfill</div>
<a class = "link" href = "">Decide which job suits you best</a>
</div>
<div class = "image3">
<img class = "image" src = "images/Contractor Landing Page.jpg" alt = "Contractor or Business - Create account">
<div class = "text">Orders completed by professionals</div>
<a class = "link" href = "">Sign up as a business or contractor</a>
</div>
</div>
<div class = "grid-container3">
<div class = "col1">
1
</div>
<div class = "col2">
2
</div>
<div class = "col3">
3
</div>
</div>Ниже приведено то, чего я пытаюсь добиться: создать сетку под тремя изображениями, куда я могу добавить прямоугольник со скругленными углами и другие объекты/текст.
С текущим кодом изображение появляется в сегменте гибкого блока.
@AHaworth Готово. Я добавил то, что я пытаюсь достичь ниже, и сделал все возможное, чтобы объяснить это.
Ответы 2
.grid-container2 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
justify-content: space-around;
padding-bottom: 4rem;
}
.image1,
.image2,
.image3 {
height: 10rem;
margin: 4rem 0 0 0;
}
.image {
width: auto;
height: auto;
}
@media (max-width: 800px) {
.grid-container2 {
flex-direction: column;
}
}
.text {
font-family: Merge;
font-size: large;
}
.link {
font-family: Merge;
font-size: small;
color: black;
}
.grid-container3 {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}<div class = "grid-container2">
<div class = "image1">
<img class = "image" src = "images/Customer Landing Page.jpg" alt = "Customer - Make a service request">
<div class = "text">Make a service request</div>
<a class = "link" href = "">Sign up as a customer</a>
</div>
<div class = "image2">
<img class = "image" src = "images/Contractor Landing Page 2.jpg" alt = "Contractor - Decide on jobs">
<div class = "text">Decide what orders you want to fulfill</div>
<a class = "link" href = "">Decide which job suits you best</a>
</div>
<div class = "image3">
<img class = "image" src = "images/Contractor Landing Page.jpg" alt = "Contractor or Business - Create account">
<div class = "text">Orders completed by professionals</div>
<a class = "link" href = "">Sign up as a business or contractor</a>
</div>
</div>
<div class = "grid-container3">
<div class = "col1">
1
</div>
<div class = "col2">
2
</div>
<div class = "col3">
3
</div>
</div>Ответы без объяснения того, что изменилось и почему, редко бывают полезными.
@HereticMonkey Я новичок на этой платформе. Я увидел проблему и пути ее решения. Затем я комментирую свое решение. Меня не интересовало объяснение. Мне очень жаль.
1.) Ваша проблема может быть решена путем создания класса container. Вы должны настроить этот класс на использование отображения flex и расположить его в направлении column следующим образом:
.container {
display: flex;
flex-direction: column;
}
С этим классом, примененным к div, все ваши компоненты будут располагаться друг над другом. Таким образом, ваш первый компонент может быть div с тремя изображениями, а также настроен на использование гибкого дисплея. Второй компонент может быть сеткой. Третьим компонентом может быть список. И так далее...
2.) Кроме того, вы забыли настроить свой grid-container2 класс на использование flex отображения и позиционировать его в row направлении по умолчанию.
.grid-container2 {
display: flex;
flex-direction: row;
}
3.) И в вашем классе grid-container3 вы устанавливаете ширину столбца по умолчанию равной 1, что означает, что даже при ширине области просмотра 800 пикселей будет отображаться только один столбец. Чтобы исправить это, вы должны настроить ширину столбца по умолчанию больше 1 или использовать медиа-запрос, чтобы изменить количество столбцов, отображаемых на больших экранах.
.grid-container3 {
display: grid;
/* Can use it... */
/* grid-template-columns: 1fr 1fr 1fr; */
/* Or more professionally: */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
@media (max-width: 800px) {
.grid-container3 {
grid-template-columns: 1fr;
}
}
4.) Чтобы изображения не выходили за пределы элемента flex, вы можете использовать стиль max-width: 100% с height: auto.
.image1,
.image2,
.image3 {
height: auto;
max-width: 100%;
}
5.) Не забудьте добавить тег meta, который включает отзывчивость от <head>:
<meta content = "width=device-width, initial-scale=1" name = "viewport" />
На основе вашего примера:
/* added */
.container {
display: flex;
flex-direction: column;
}
.grid-container2 {
display: flex;
flex-direction: row;
}
/* original */
.image1,
.image2,
.image3 {
height: auto; /* edited */
max-width: 100%; /* added */
margin: 4rem 0 0 0;
}
.image {
width: auto;
height: auto;
}
@media (max-width: 800px) {
.grid-container2 {
flex-direction: column;
}
}
.text {
font-family: Merge;
font-size: large;
}
.link {
font-family: Merge;
font-size: small;
color: black;
}
.grid-container3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* edited */
gap: 20px;
}
/* added */
@media (max-width: 800px) {
.grid-container3 {
grid-template-columns: 1fr;
}
}<!-- in head -->
<meta content = "width=device-width, initial-scale=1" name = "viewport" />
<!-- in body -->
<div class = "container">
<!-- your code implement to main container -->
<div class = "grid-container2">
<div class = "image1">
<img class = "image" src = "https://via.placeholder.com/150" alt = "Customer - Make a service request">
<div class = "text">Make a service request</div>
<a class = "link" href = "">Sign up as a customer</a>
</div>
<div class = "image2">
<img class = "image" src = "https://via.placeholder.com/150" alt = "Contractor - Decide on jobs">
<div class = "text">Decide what orders you want to fulfill</div>
<a class = "link" href = "">Decide which job suits you best</a>
</div>
<div class = "image3">
<img class = "image" src = "https://via.placeholder.com/150" alt = "Contractor or Business - Create account">
<div class = "text">Orders completed by professionals</div>
<a class = "link" href = "">Sign up as a business or contractor</a>
</div>
</div>
<div class = "grid-container3">
<div class = "col1"> 1 </div>
<div class = "col2"> 2 </div>
<div class = "col3"> 3 </div>
</div>
</div>
Я не вижу контента «между» - не могли бы вы дать представление о том, каким вы хотите получить результат? (подойдет эскиз).