Html 如何强制2个div并排保持

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

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

我试图实现的是，当你改变页面的宽度时，两个div将并排保留，但是左侧的图像将缩小，而不是文本放在下面

我的努力

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

---

这就是你想要的吗

CSS:

HTML:

话
更多的话

很好。我只想添加以下代码行：

CSS

---

这正是我想要的。。。刚刚获得了.img的75%和.img的另外25%。。。将在几分钟内标记为答案。其他分区中的文本移出页面不是问题。只需添加主体{overflow-x:hidden；}

.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{}

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

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

.img,
.other { display: inline-block; }
.outer { white-space: nowrap; }