我在创建响应式布局时遇到问题。我想创建一个父div，它将具有指定的最大宽度，例如1200 px和七个文本块，这些块将在其中，并且具有一定的最小宽度，例如150 px。问题是在父块中定位元素，我希望在第一行看到四个高分辨率的文本块，在第二行看到三个。在第一行的分辨率下，将有三个文本块，第二行的分辨率相同，第三行的分辨率为一个文本块。如果在第一行、第二行和第三行再次降低分辨率，将有两个文本块，在第四行中，请帮助。
目前，我设法编写了这样一个代码：
.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>最佳答案
你想要这样的东西吗？
.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%;
}
}
关于html - 如何在父div中放置文本块？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50899834/