gpt4 book ai didi

javascript - 当一个 div block 被触摸并且在同一条线上时,我如何将一个 div block 放在另一个垂直排列的下方?

转载 作者:太空宇宙 更新时间:2023-11-04 10:04:31 25 4
gpt4 key购买 nike

这是html和css代码:

HTML:

<body>
<div id="box1"></div>
<div id="box2"></div>
</body>

CSS:

#box1 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: left;
margin-left: 100px;
}

#box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: right;
margin-right: 100px;
}

所以这在同一水平线上显示了两个 block 。当我通过向左拖动窗口来最小化浏览器窗口时,它到达了两个 div 接触的位置。

一旦它们接触,右边的就在左边的下面,但不是垂直对齐的。像这样: right after touch

我的问题是,我怎样才能做到当盒子接触时,右边的 div 直接位于左边的 div 下方并一直停留,直到我将窗口宽度设置得足够大。我希望它在接触时保持这样: want

我找不到这方面的 Bootstrap 文档。我想用这两个框来包含一个下拉选择菜单(我已经知道怎么做了)。如果您知道可以满足我的需要的 Bootstrap 类或修复我提供的代码的方法,请告诉我。我愿意接受 jQuery 和 Js 中的建议。如果我的问题不清楚,请告诉我,我会回复。谢谢。

最佳答案

现在是使用 display: flex 的好时机,参见 fiddle https://jsfiddle.net/cvnrwo13/5/

<body>
<div class="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>

CSS

.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 100px 0 100px
}

#box1, #box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
}

关于javascript - 当一个 div block 被触摸并且在同一条线上时,我如何将一个 div block 放在另一个垂直排列的下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38133953/

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