3 个 Div，一个容器，响应式

Question

HTML:

<body>
    <div class="wrapper">
        <div class="x"></div>
        <div class="y"></div>
        <div class="z"></div>

    </div>

</body>

CSS:

body, html {
    height: 100%;
    margin: 0px auto;
    padding: 0px auto;
}
.wrapper {
    height: auto;
    min-height: 100%;
    margin: 0px auto;
    padding: 0px auto;
    max-width: 100%;
    background: #de291e;
}
.x {
    background: url('http://placehold.it/300x505') no-repeat center;
    background-size: contain;
    max-width: 300px;
    width:100%;
    height: 505px;

    display: block;
    float:left;
}
    .y {
    background: url('http://placehold.it/500x505') no-repeat center;
    background-size: contain;
    max-width: 500px;
    width:100%;
    height: 505px;

    display: block;
    float:left;
}
    .z {
    background: url('http://placehold.it/100x505') no-repeat center;
    background-size: contain;
    max-width: 100px;
    height: 505px;
    width:100%;

    display: block;
    float:left;
}

我在屏幕上有这 3 个 div，但是当 windows 调整大小时，它们会分成新的行...

然后我想继续在同一行，就像响应一样..

有人可以帮忙吗？我现在正在搜索这个几个小时.. :(

（也有可能他们总是匹配屏幕尺寸吗？）目前最大值是 900px.. 但我不知道，也许如果有人有一个大屏幕，适合它）

Answer 1

您需要按百分比计算。

您的包装纸是 100%，并且您在该包装纸内并排放置了 3 个 div。这 3 个 div 需要等于 100%，所以第一个 div 可以是 40%，第二个 50% 和最后 10%（随便玩，直到你得到你喜欢的）

body, html {
    height: 100%;
    margin: 0px auto;
    padding: 0px auto;
}
.wrapper {
    height: auto;
    min-height: 100%;
    margin: 0px auto;
    padding: 0px auto;
    max-width: 100%;
    background-color: white;
}
.x {
    background-color:green;
    width:40%;
    height: 505px;
    float:left;
}
    .y {
    background-color:blue;
    width:50%;
    height: 505px;
    float:left;
}
    .z {
    background-color:red;
    height: 505px;
    width:10%;
    float:left;
}

Answer 2

问题是您的 div 的 css 中的宽度，您的代码说的是将完整的内容提供给可能假设 1000px 的父级 width:100% 但另一方面，您设置了 max-width:300px 的限制，因此它想要在屏幕上占据整个宽度，即 1000px 但 max-width 将其限制为 300px所以看起来一切正常，但你的 css 中存在冲突，这并不明显，然后你只需调整 window div 的大小移动到下一行，因为没有足够的 space。基本上你要做的就是给它一个实际需要的宽度。

就像我给所有 3 个 div 的值 width:33% 而不是在 dividually 中给它们所有 100% 并且代码工作正常。

3 个 Div，一个容器，响应式

3 Divs, One container, Responsive

html

css

contains