4 个响应式 div 在选项卡和移动设备上未正确显示

Question

我正在尝试为主页创建 4 个响应式 div；试图减少 div 的填充和边距不起作用。div 应该在移动设备上做出响应，它们应该在每个设备下方移动；两个 div 出现在选项卡上；桌面 4 个 div 和移动设备 1 个 div 我尝试了以下 HTML：

 <div class="flex-container">
    <div class="flex-item">
        <div class="flex-item-inner">
               <div class="homepage-div homepage-div-shadow">
                <img class="homepage-div-icon"/>
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below .</p>
                <button class="bttn"><a href="#" role="button">Practice Now</a></button>
               </div>
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-item-inner">
               <div class="homepage-div homepage-div-shadow">
                <img class="homepage-div-icon"/>
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below .</p>
                <button class="bttn"><a href="#" role="button">Practice Now</a></button>
               </div>
        </div>
    </div>
<div class="flex-item">
        <div class="flex-item-inner">
               <div class="homepage-div homepage-div-shadow">
                <img class="homepage-div-icon"/>
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below .</p>
                <button class="bttn"><a href="#" role="button">Practice Now</a></button>
               </div>
        </div>
    </div>
<div class="flex-item">
        <div class="flex-item-inner">
               <div class="homepage-div homepage-div-shadow">
                <img class="homepage-div-icon"/>
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below .</p>
                <button class="bttn"><a href="#" role="button">Practice Now</a></button>
               </div>
        </div>
    </div>
</div>

here is css divs are not showing properly on tab and mobile devices and i want to decreae the padding and margin:



    .homepage-div-shadow
    {
        padding: 20px;
        box-shadow: 2px 2px 8px 1px #cccccc;
        border: solid 1px #cccccc;
        border-radius: 2px;
    }

    .homepage-div-icon{
        background-image: url("image.png");
        width: 100px;
        height: 100px;
    }
    .homepage-div a
    {
        text-decoration: none;
        color: white;
        font-size: 16px;
    }
    .homepage-div h2{
        font-size: 28px;
        opacity: 0.90;
        font-weight: 600;
        margin: 5%;
        margin-bottom: 6px;
    }
    .homepage-div h6{
        font-size: 17px;
        padding: 0px;
        margin: 0px;
        margin-bottom: 20px;
        opacity: 0.6;
    }
    @media(min-width: 769px) {
        .flex-container {
            display: flex;
            flex-wrap: wrap;
        }


        .flex-container .flex-item {
            flex: 1 0 50%;
        }
    }

    @media (min-width: 1024px) {
        .flex-container .flex-item {
            flex: 1 0 25%;
        }
    }

        .flex-item-inner {
            padding: 25px;
            margin: 20px;
            background-color: white;
        }

这里是演示链接：testfellow

Answer 1

希望以下解决方案有所帮助。我刚刚尝试模拟存在一定数量 div 的场景。根据您的问题和要求，有：
1. 遵循移动优先的方法。
2. 对于移动设备，每个div 应分行。
3. 对于标签（在你的断点处：769px 及以上），两个divs 应该排成一行。
4. 对于桌面（在你的断点处：1024px 及以上），四个divs 应该排成一行。

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #2980b9;
}

.flex {
  max-width: 80%;
}

.flex-item {
  background-color: #ffffff;
  padding: 5em;
  border: 1px solid black;
  margin: 2% auto;
  width: 25%;
}

@media(min-width: 769px) {
  .flex {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-item {
    width: 50%;
  }
}

@media(min-width: 1024px) {
  .flex {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-item {
    width: 25%;
  }
}

<div class="flex">
  <div class="flex-item"></div>
  <div class="flex-item "></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item "></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>