Question

基本上标题说明了一切。

我如何让两个div彼此相邻，当在不同大小的屏幕上（比方说更小）时，它们不会合并为一个，如果没有足够的空间可以下到下一行？如果可能的话，缩小内部元素（文本和图像和按钮）

谢谢！

有问题的当前页面（赠品盒是顺便说一下btw）：

Answer 1

为它们添加一个带浮点数的类：左边。并使用保证金将它们置于您想要的中心而不是您的保证金左边：50％。

类似的东西：

    .giveaway {
    background-color: #C0C0C0;
    width: 360px;
    height: 325px;
    border-style: solid;
    border-color: #336699;
    float: left;
    margin: 10px 25px;
}

.giveaway1 {
    background-color: #C0C0C0;
    width: 360px;
    height: 325px;
    border-style: solid;
    border-color: #336699;
    float: left;
    margin: 10px 25px;
}

顺便说一下，你应该为同时使用同一个班级......

Answer 2

我使用了一个包装器div来包含和居中两个较小的div。然后只使用媒体查询使它们在某个窗口宽度（对于较小的屏幕）阻止级别

当然，您可以根据自己的需要调整widths / @media规则

timeout

html, body {
    margin: 0;
    padding: 0;
}
#page-wrapper {
    border: 1px solid red;
    text-align: center;
}
.box {
    text-align: left;
    display: inline-block;
    border: 1px solid #000000;
    box-sizing: border-box;
    width: 300px;
    height: 200px;
}
@media(max-width: 650px) {
    .box {
        width: auto;
        display: block;
    }
}

如何将两个div并排并在所有维度上保持相同的面积比例？

2 个答案: