html - 如何让按钮横跨水平与堆叠并在移动设备上使它们占 50%(2 x 2)？

Question

我正在努力实现桌面和移动设备的以下外观 -

这是我目前所拥有的 -

    .container {
        display: flex;
        flex-direction:row;
        margin: 0 auto;
        width: 100%;
        max-width: 1170px;
        flex-wrap: wrap;
        height:100vh;
    }
    
    .button {
        letter-spacing: 1px;
        justify-content: space-between;
        flex: 1 0 auto;
        align-items: flex-start;
    }
    /* ---- Intro ---- */
    
    #intro {
        background: #ff6400;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4em 0;
    }
    
    #intro .cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    
    #intro .cta .splash {
        display: none;
    }

<div id='intro'>
    <div class='cta container'>
        <div class="herosvg-container"><img src="http://svgshare.com/i/407.svg" width="100%"></div>
        <p>Delectus illum corporis laundantium illo repudiandae et doloemque.</p>
        <a class='button' href='#'> <span>SHOP NOW</span> </a>
        <a class='button' href='#'> <span>SHOP NOW</span> </a>
        <a class='button' href='#'> <span>SHOP NOW</span> </a>
        <a class='button' href='#'> <span>SHOP NOW</span> </a>
    </div>
</div>

我想避免遇到按钮可能与 svg 重叠的问题，反之亦然。此外，我希望能够分别控制按钮和 svg 的宽度，同时能够说“我想将 svg 和按钮 float 到英雄的左侧或右侧。”

如果您有任何想法或能为我指出正确的方向，您将成为救命稻草。

谢谢!

Answer 1

将链接包装在自己的容器中。您会发现在that 容器上使用 flexbox 时，显示它们要简单得多。

媒体查询完成剩下的工作。

整页 - 侧面按钮

小页面 - 行下方的按钮

移动版 - 环绕 行下方的按钮

一个简单的例子:

.container {
  display: flex;
  width: 80%;
  margin: auto;
}

img {
  max-width: 100%;
}

.button-wrap {
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

@media (max-width: 699px) {
  .container {
    flex-direction: column;
  }
  .button-wrap {
    padding: 1em 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  button {
    flex: 0 0 20%;
  }
}

@media (max-width: 400px) {
  button {
    flex: 0 0 40%;
    margin-bottom: 1em;
  }
}

<div class="container">
  <div class="hero"><img src="http://www.placebacon.net/1200/300" alt=""></div>
  <div class="button-wrap">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
  </div>
</div>

Codepen Example