有没有办法让两个div元素充当一个元素？

问题描述 投票：0回答：1

所以，我的问题是我正在尝试使该网页具有响应能力。为此，我必须同时缩小两个 div 元素，而不能让一个元素位于另一个元素之上，这与现在所做的相反。我尝试将两个 div 元素包装在一个大 div 元素中，然后设置其最大宽度。但是，事实证明这不起作用，我也不知道为什么。非常感谢您提供的任何答案。

我的代码粘贴在这里：

#headerMem {
    text-align: center;
    width:100%;
    background-color: rgb(17, 17, 17);
    height:15vh;
    margin:0px;
    line-height: 15vh;
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    font-size: 50px;
    color:white;
}
body {
    margin:0px;
}
p {
    margin:0px;
}
#mainBody {
    background-color: rgb(38, 38, 38);
    width:100%;
    height: 900px;
}
#normMem {
    width:500px;
    height:75%;
    background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
    border-radius: 30px;
    display: inline-block;
    margin:5px;
    box-shadow: 0px 20px black;
    border:1px solid black;
    color:black;
}
#normMem:active {
    width:500px;
    height:75%;
    background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
    border-radius: 30px;
    display: inline-block;
    margin:5px;
    box-shadow: 0px 10px black;
    border:1px solid black;
    color:black;
    transform: translateY(10px);
}
#delMem {
    width:500px;
    height:75%;
    background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
    border-radius: 30px;
    display: inline-block;
    border:1px solid gold;
    margin:5px;
    color:black;
    box-shadow: 0px 20px black;
}
#delMem:active {
    width:500px;
    height:75%;
    background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
    border-radius: 30px;
    display: inline-block;
    border:1px solid gold;
    margin:5px;
    color:black;
    box-shadow: 0px 10px black;
    transform: translateY(10px);
}
#normMem:hover {
    width:500px;
    height:75%;
    background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
    border-radius: 30px;
    display: inline-block;
    margin:5px;
    cursor: pointer;
    color:black;
}
#delMem:hover {
    width:500px;
    height:75%;
    background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
    border-radius: 30px;
    display: inline-block;
    border:1px solid gold;
    margin:5px;
    cursor:pointer;
}
#optionsMem {
    text-align: center;
    background-color: rgb(33, 33, 33);
    height:90px;
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    color:white;
    line-height: 90px;
    font-size: 35px;
}
#delMemHeader {
    text-align: center;
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    padding:50px;
    font-size: 50px;
}
#normMemHeader {
    text-align: center;
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    padding:50px;
    font-size: 50px;
}
#normMemList {
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: x-large;
}
#delMemList {
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: x-large;
}
#normMemP {
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: large;
    padding:10px;
}
#delMemP {
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: large;
    padding:10px;
}
#backArrow {
    transform: translate(10px, 60px);
    font-size: 40px;
    color:white;
    cursor: pointer;
}
#priceDeluxe {
    font-size: 50px;
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    text-align: center;
}
#priceNormal {
   font-size: 50px; 
   font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
   text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="yearlymempage.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=arrow_back" />
    <title>Yearly Membership|cosmicgames.fun</title>
</head>
<body>
    <div id="headerMem">
        <p>Yearly Membership</p>
    </div>
    <div id="mainBody">
        <a href="membershippage.html">
        <span class="material-symbols-outlined" id="backArrow">
            arrow_back
            </span>
            </a>
        <div id="optionsMem">
        <p>Membership Options:</p>
        </div>
        <a href="normalyearlymembership.htm">
        <div id="normMem">
            <p id="normMemHeader">Normal Membership</p>
            <ul id="normMemList">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <p id="normMemP">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum praesentium qui assumenda consectetur repellat consequatur voluptatibus minus eos et, culpa, in, nihil veritatis mollitia reiciendis quas. A temporibus architecto quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id aut tenetur quo deleniti asperiores? Ut enim sunt nisi incidunt voluptatem error, earum, recusandae nam amet architecto iusto, vel esse modi.</p>
            <p id="priceNormal">$29.99</p>
        </div>
        </a>
        <a href="deluxeyearlymembership.htm">
        <div id="delMem">
            <p id="delMemHeader">Deluxe Membership</p>
            <ul id="delMemList">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <p id="normMemP">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum praesentium qui assumenda consectetur repellat consequatur voluptatibus minus eos et, culpa, in, nihil veritatis mollitia reiciendis quas. A temporibus architecto quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id aut tenetur quo deleniti asperiores? Ut enim sunt nisi incidunt voluptatem error, earum, recusandae nam amet architecto iusto, vel esse modi.</p>
            <p id="priceDeluxe">$39.99</p>
        </div>
        </a>
    </div>
</body>
</html>

有答案吗？

html css media-queries
1个回答
0
投票

Flex 会做你想做的！将卡片包裹在 div 中。我添加了滚动条，这是在手机上显示的好方法。

如果您希望它在移动设备上垂直排序，您也可以添加此 CSS 

@media(max-width:768px) {.wrapper-div  { flex-direction: column;}}
/

    #headerMem {
        text-align: center;
        width:100%;
        background-color: rgb(17, 17, 17);
        height:15vh;
        margin:0px;
        line-height: 15vh;
        font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
        font-size: 50px;
        color:white;
    }
    body {
        margin:0px;
    }
    p {
        margin:0px;
    }
    #mainBody {
        background-color: rgb(38, 38, 38);
        width:100%;
        height: 900px;
    }
    #normMem {
        width:500px;
        height:auto;
        background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
        border-radius: 30px;
        display: inline-block;
        margin:5px;
        box-shadow: 0px 20px black;
        border:1px solid black;
        color:black;
    }
    #normMem:active {
        width:500px;
        height:auto;
        background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
        border-radius: 30px;
        display: inline-block;
        margin:5px;
        box-shadow: 0px 10px black;
        border:1px solid black;
        color:black;
        transform: translateY(10px);
    }
    #delMem {
        width:500px;
        height:auto;
        background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
        border-radius: 30px;
        display: inline-block;
        border:1px solid gold;
        margin:5px;
        color:black;
        box-shadow: 0px 20px black;
    }
    #delMem:active {
        width:500px;
        height:auto;
        background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
        border-radius: 30px;
        display: inline-block;
        border:1px solid gold;
        margin:5px;
        color:black;
        box-shadow: 0px 10px black;
        transform: translateY(10px);
    }
    #normMem:hover {
        width:500px;
        height:auto;
        background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
        border-radius: 30px;
        display: inline-block;
        margin:5px;
        cursor: pointer;
        color:black;
    }
    #delMem:hover {
        width:500px;
        height:auto;
        background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
        border-radius: 30px;
        display: inline-block;
        border:1px solid gold;
        margin:5px;
        cursor:pointer;
    }
    #optionsMem {
        text-align: center;
        background-color: rgb(33, 33, 33);
        height:90px;
        font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
        color:white;
        line-height: 90px;
        font-size: 35px;
    }
    #delMemHeader {
        text-align: center;
        font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
        padding:50px;
        font-size: 50px;
    }
    #normMemHeader {
        text-align: center;
        font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
        padding:50px;
        font-size: 50px;
    }
    #normMemList {
        font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: x-large;
    }
    #delMemList {
        font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: x-large;
    }
    #normMemP {
        font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: large;
        padding:10px;
    }
    #delMemP {
        font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: large;
        padding:10px;
    }
    #backArrow {
        transform: translate(10px, 60px);
        font-size: 40px;
        color:white;
        cursor: pointer;
    }
    #priceDeluxe {
        font-size: 50px;
        font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
        text-align: center;
    }
    #priceNormal {
       font-size: 50px; 
       font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
       text-align: center;
    }
    .wrapper-div {
        display: flex;
        width: 100%;
        height: 75%;
        max-width: 100%;
        overflow: auto;
        flex-wrap: nowrap;
    }
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="yearlymempage.css" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=arrow_back" />
        <title>Yearly Membership|cosmicgames.fun</title>
      </head>
      <body>
        <div id="headerMem">
          <p>Yearly Membership</p>
        </div>
        <div id="mainBody">
          <a href="membershippage.html">
            <span class="material-symbols-outlined" id="backArrow"> arrow_back </span>
          </a>
          <div id="optionsMem">
            <p>Membership Options:</p>
          </div>
          <div class="wrapper-div">
            <a href="normalyearlymembership.htm">
              <div id="normMem">
                <p id="normMemHeader">Normal Membership</p>
                <ul id="normMemList">
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Lorem ipsum dolor sit amet.</li>
                </ul>
                <p id="normMemP">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum praesentium qui assumenda consectetur repellat consequatur voluptatibus minus eos et, culpa, in, nihil veritatis mollitia reiciendis quas. A temporibus architecto quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id aut tenetur quo deleniti asperiores? Ut enim sunt nisi incidunt voluptatem error, earum, recusandae nam amet architecto iusto, vel esse modi.</p>
                <p id="priceNormal">$29.99</p>
              </div>
            </a>
            <a href="deluxeyearlymembership.htm">
              <div id="delMem">
                <p id="delMemHeader">Deluxe Membership</p>
                <ul id="delMemList">
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Lorem ipsum dolor sit amet.</li>
                  <li>Lorem ipsum dolor sit amet.</li>
                </ul>
                <p id="normMemP">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum praesentium qui assumenda consectetur repellat consequatur voluptatibus minus eos et, culpa, in, nihil veritatis mollitia reiciendis quas. A temporibus architecto quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id aut tenetur quo deleniti asperiores? Ut enim sunt nisi incidunt voluptatem error, earum, recusandae nam amet architecto iusto, vel esse modi.</p>
                <p id="priceDeluxe">$39.99</p>
              </div>
            </a>
          </div>
        </div>
      </body>
    </html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.