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

我想继续在同一行，就像回应一样..

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

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

Answer 1

你需要以百分比的形式工作。

你的包装是100％，你在包装内并排有3个div。那3个div需要等于100％所以第一个div可以是40％，第二个div可以是40％，也可以是最后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的宽度是什么，你的代码所说的是充分考虑到父母可能假设1000px与width:100%但另一方面。您设置了max-width:300px的限制，因此它希望在屏幕上显示全宽1000px，但max-width将其限制为300px所以看起来一切正常但是你的css中存在一个不明显的冲突然后你只需调整窗口div的大小就会移动到下一行，因为没有足够的空间。基本上你要做的就是给它一个实际需要的宽度。

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

3个分区，一个容器，响应

2 个答案: