html - 如何强制2个div并排保持

Question

我的网站左侧有一张图片，它会根据浏览器大小进行缩放。右边是一些文本。

我遇到的问题是，当浏览器变小时，右侧的 div 会下降到左侧图像的下方，只有当图像现在是屏幕上的唯一元素时，它才会开始缩小

https://jsfiddle.net/0gyhrve2/

我想要实现的是，当您更改页面的宽度时，2 个 div 将并排保留，但左侧的图像会缩小，而不是文本落在下面。

我的努力

<div class="outer">
    <div class="img">Words</div>
    <div class="other">More words</div>
</div>

CSS

.img {
float: left;
        background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 349px;
        font-weight: bold;
        text-shadow: 1px 1px 2px #000;
        max-width: 300px;
}

.other{}

Answer 1

这是你想要的吗:https://jsfiddle.net/0gyhrve2/3/ ？

CSS:

.img {
        background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 349px;
        font-weight: bold;
        text-shadow: 1px 1px 2px #000;
        max-width: 300px;
}

.imgContainer {
    float: left;
    width: 75%;
}

.other {
    float: left;
    width: 25%;
}

HTML:

<div class="outer">
    <div class="imgContainer"><div class="img">Words</div></div>
    <div class="other">More words</div>
</div>