Question

我在创建响应式布局时遇到问题。我想创建一个父div，它将具有指定的最大宽度，例如1200px和七个文本块，它们将在其中并具有一定的最小宽度，例如150像素。问题在于将元素定位在父块中，我希望在第一行中以高分辨率看到四个文本块，在第二行中看到三个文本块。在第一行中的分辨率的分辨率将有三个文本块，在第二行中以相同的方式并且在第三行中具有一个文本块。如果在第一行，第二行和第三行再次降低分辨率，则会有两个文本块，而在第四行中等等。请帮助。

目前，我设法编写了这样的代码：

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 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%;
    }
}

如何在父div中定位文本块？

1 个答案: