Html 3个分区，一个容器，响应速度快_Html_Css_Contains

Html 3个分区，一个容器，响应速度快

html css

Html 3个分区，一个容器，响应速度快,html,css,contains,Html,Css,Contains,演示： HTML: <body> <div class="wrapper"> <div class="x"></div> <div class="y"></div> <div class="z"></div> </div> </body> 我在屏幕上有这3个div，但是当调整窗口大小时，它们会分成新行然后我

演示：

HTML:

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

    </div>

</body>

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

然后我想继续在同一行，像是有反应

有人能帮忙吗？我已经搜索了几个小时了..：（

（也有可能他们总是匹配屏幕大小吗？）现在最大值是900px。但是我不知道，如果有人有一个大屏幕，可能会适合它）

你需要按百分比工作

你的包装是100%，你有3个div并排在包装里面。这3个div需要等于100%，因此第一个div可以是40%，第二个div可以是50%，最后一个div可以是10%（只需四处玩，直到你得到你想要的）

问题是div的css中的宽度，您的代码所说的是，将给定给父级的宽度设为

1000px

with

width:100%

，但另一方面，您设置了

max width:300px

的限制，因此它希望在屏幕上取全宽，即

1000px

，但

max width

将其限制为

300px

看起来一切正常，但css中有一个不可察觉的冲突，然后您只需调整窗口div的大小就可以移动到下一行，因为没有足够的空间。基本上你要做的就是给它一个实际需要的宽度

比如，我给了所有3个div一个

width:33%

的值，而不是单独给所有div一个

100%

，代码运行良好

你可以画一张你想要最终结果的图片？解决了吗

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;
}

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;
}