gpt4 book ai didi

html - 在移动浏览器上的 div 1 下显示 div 2 - css : flex,

转载 作者:太空宇宙 更新时间:2023-11-04 08:46:17 28 4
gpt4 key购买 nike

我有两个 div,在 destop 计算机上正确显示。但是在移动浏览器上它们看起来不太好。

如何在移动浏览器中让 div2 位于 div1 之下(不是在同一行)?

<html>

<head>
<style>
.flexcontainer {
display: flex;
justify-content: space-between;
width: 1200px;
margin-bottom: 40px;
border:1px solid red;
}

.itemcontainer {

flex-wrap: wrap;
}
</style>
</head>

<body>

<div class="flexcontainer itemcontainer ">

<div id="div1" style="border:1px solid blue; width:280px; height:300px; margin-right:auto;"> Yessss </div>
<div id="div2" style="border:1px solid blue; width:280px; height:300px; margin-left:auto">No</div>
</body>
</div>
</html>

最佳答案

@media (max-width: 767px) {
.flexcontainer{
flex-direction : column;
}
}

只需在移动 View 中将 flex-direction 更改为 column。

你可以从这个网站练习和理解 Flexbox: https://flexboxfroggy.com/

关于html - 在移动浏览器上的 div 1 下显示 div 2 - css : flex,,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43758084/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com