3 个 div，一个容器，响应式答案

【问题标题】：3 Divs, One container, Responsive3 个 div，一个容器，响应式
【发布时间】：2016-04-28 13:22:43
【问题描述】：

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，但是在调整窗口大小时，它们会分成新的行...

然后我想在同一行继续，比如响应式..

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

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

【问题讨论】：

你可以放一张你想要的最终结果的图片吗？

标签： html css contains

【解决方案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;
}

【讨论】：

解决了

【解决方案2】：

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

就像我给所有 3 个 div 赋予了 width:33% 的值，而不是分别给它们所有 100% 并且代码运行良好。

【讨论】：