Как разместить текстовые блоки в родительском div?
У меня проблема с созданием адаптивного макета. Я хочу создать родительский div, который будет иметь указанную максимальную ширину, например. 1200 пикселей и семь текстовых блоков, которые будут в нем и будут иметь определенную минимальную ширину, например 150 пикселей. Проблема заключается в размещении элементов в родительском блоке, я хотел бы видеть четыре блока текста в первой строке в высоком разрешении и три во второй строке. При разрешении разрешения в первой строке будет три текстовых блока, во второй строке так же и в третьей - один текстовый блок. Если вы снова уменьшите разрешение в первой, второй и третьей строке, будет два текстовых блока, а в четвертом и т. д. Пожалуйста, помогите.
На данный момент мне удалось написать такой код:
.parent{
max-width: 1500px;
position: relative;
margin: 0 auto;
border: 2px solid rgb(223, 113, 113);
}
.first, .third, .fifth, .seventh{
background-color: rgb(248, 125, 77);
border: 2px solid rgb(240, 85, 24);
border-radius: 5px;
float: left;
min-width: 300px;
max-width: 375px;
margin: 16px;
padding: 5px;
}
.second, .fourth, .sixth{
background-color: rgb(102, 189, 247);
border: 2px solid rgb(29, 154, 238);
border-radius: 5px;
float: left;
max-width: 375px;
min-width: 300px;
margin: 16px;
padding: 5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Responsive layout</title>
<link rel = "Stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "parent">
<div class = "first"></div>
<div class = "second"></div>
<div class = "third"></div>
<div class = "fourth"></div>
<div class = "fifth"></div>
<div class = "sixth"></div>
<div class = "seventh"></div>
</div>
</body>
</html>
Ответы 1
Вы хотите что-то подобное?
.parent{
width:1200px;
position: absolute;
margin: 0px;
border: 2px solid rgb(223, 113, 113);
}
.first, .third, .fifth, .seventh{
background-color: rgb(248, 125, 77);
border: 2px solid rgb(240, 85, 24);
border-radius: 5px;
float: left;
margin: 16px;
padding: 5px;
}
.second, .fourth, .sixth{
background-color: rgb(102, 189, 247);
border: 2px solid rgb(29, 154, 238);
border-radius: 5px;
float: left;
margin: 16px;
padding: 5px;
}
.first, .third, .fourth, .second{
width: calc(25% - (3*15.5px));
}
.seventh, .fifth, .sixth{
width: calc(100% / 3 - (3*15.5px));
}
@media all and (max-width: 1215px) {
.parent{
width: 95%;
}
.first, .third, .fourth, .second{
width: calc(100% / 3 - (3*15.5px));
}
.fourth, .fifth, .sixth{
width: calc(100% / 3 - (3*15.5px));
}
.seventh{
width: 95%;
}
}
Просто добавьте: min-width: 300px; Но если у них минимальная ширина 300 пикселей, у вас не может быть поля 16 пикселей, потому что ваш родитель - 1200 пикселей, а 4 * 300 - 1200, поэтому у вас недостаточно места для 4 div.
+ Он получает 14 пикселей от border-left 2px, border-right 2px, padding left 5px, padding right 5px, поэтому, если вы хотите исправить 300px divs, вам нужно установить минимальную ширину 286px
Я понимаю, большое вам спасибо. В случае проблем напишу.
Да, это примерно так. У меня все еще есть вопрос о разделении первого, второго, третьего, четвертого, пятого, шестого и седьмого, поэтому они имеют минимальную ширину 300 пикселей. Как изменить код, чтобы он работал как на изображении, но с установленной минимальной шириной?