这是我目前所拥有的 -
.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 到英雄的左侧或右侧。”
如果您有任何想法或能为我指出正确的方向,您将成为救命稻草。
谢谢!
最佳答案
将链接包装在自己的容器中。您会发现在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>
关于html - 如何让按钮横跨水平与堆叠并在移动设备上使它们占 50%(2 x 2)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47657827/