问题描述
https://jsfiddle.net/bb567go/wzg21fnk/
<!DOCTYPE html>
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Module-2 Assignment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
*{ margin:0;
padding:0;
Box-sizing: border-Box;
}
body{
font-size: 15px;
font-family: cursive;
}
h1{
text-align: center;
position: relative;
top:50px;
}
section{
height:100vh;
width:100%;
display: flex;
flex:row wrap;
justify-content: center;
align-items: center;
border:2px solid black;
}
#pink{
background-color: rgb(228,111,169);
}
#red{
background-color: rgb(216,61,61);
color: white;
}
#yellow{
background-color: rgba(245,220,77,0.904);
}
.btn
{
position: relative;
top:-25px;
right:-5px;
height:25px;
float: right;
width:100px;
border: none;
outline:none;
border-bottom: black;
border-left: black;
}
.gray{
border: 2px solid black;
justify-self: center;
margin: 15px 10px;
background-color:gray;
align-self: center;
width:100%;
height:200px;
line-height: 20px;
padding: 25px 5px 5px 5px;
}
@media only screen and (min-width:991px){
.gray{
width:33.3%;
}
}
@media only screen and (min-width:768px) and (max-width:991px){
#item-1,#item-2{
width:50%
}
#item-3{
width:100%
}}
@media only screen and (max-width:767px){
.gray{
width:100%
}
}
</style>
<h1>Our Menu</h1>
<section class="main-section">
<div class="gray" id="item-1">
<div> <button class="btn" id="pink">Chicken</button></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iusto necessitatibus
magnam modi
harum? Fugit et fuga nam molestiae,laborum debitis aperiam amet atque blanditiis placeat
dolorem
dolorum eius,delectus quam quasi voluptate perferendis iste? Libero,quibusdam nam,alias quisquam
sit provident labore animi quos dolorum ipsum pariatur est modi.</p></div>
<div class="gray" id="item-2">
<div> <button class="btn" id="red">Beef</button></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iusto
necessitatibus magnam modi
harum? Fugit et fuga nam molestiae,laborum debitis aperiam amet atque blanditiis
placeat dolorem
dolorum eius,alias quisquam
sit provident labore animi quos dolorum ipsum pariatur est modi.</p></div>
<div class="gray" id="item-3">
<div> <button class="btn" id="yellow">Sushi</button></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iusto
necessitatibus magnam modi
harum? Fugit et fuga nam molestiae,alias quisquam
sit provident labore animi quos dolorum ipsum pariatur est modi.</p></div>
</section>
我希望我的自适应设计像这样：在台式机上 所有带有文本的灰色框
在平板电脑上 我希望前两个框占据第一行中一半的空间，而下一行中的第三个框覆盖该空间的前一行中前两个框的总和
在手机上 下一行中的每个框
解决方法
我看到了您的代码，而不是媒体查询问题。您已失去任何其他功能，因此可以使用下面的解决方案。
解决方案：
section{
flex-wrap:wrap
}
嘿，我试用了您的代码，我相信我把您放在正确的轨道上。
签出：https://jsfiddle.net/d9L36wjh/6/
*,*:before,*:after {
box-sizing: border-box;
}
body{
font-size: 15px;
font-family: cursive;
}
h1{
text-align: center;
top:50px;
}
section{
display: flex;
height: 100vh;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid black;
}
#pink{
background-color: rgb(228,111,169);
}
#red{
background-color: rgb(216,61,61);
color: white;
}
#yellow{
background-color: rgba(245,220,77,0.904);
}
.btn
{
position: relative;
top: -25px;
right: -5px;
height: 25px;
float: right;
width: 100px;
border: none;
outline: none;
border-bottom: black;
border-left: black;
}
.gray{
border: 2px solid black;
margin: 15px 10px;
background-color: gray;
width: 400px;
height: auto;
line-height: 20px;
padding: 25px 5px 5px 5px;
}
@media (max-width: 480px) {
section {
flex-direction: column;
}
.gray {
width: auto;
}
}
@media (max-width: 1280px) {
section {
align-items: stretch;
}
#item-1 {
flex-grow: 1;
}
#item-2 {
flex-grow: 1;
}
#item-3{
flex-grow: 2;
}
}
剩下的你自己做。查阅本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
您只需要调整列换行的媒体查询，这样它就不会在移动视图中溢出节容器。并且您可能想增加不同视口中项目容器的高度。 您仍然有事要做，但是从这里开始应该没什么大不了的。
更新：我调整了媒体查询，并认为它现在看起来像您想要的样子。
玩得开心