Question

我的网站左侧有一张图片，可根据浏览器尺寸进行缩放。右边是一些文字。

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

我想要实现的是，当您更改页面的宽度时，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>

Answer 2

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

CSS

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

jsfiddle

的示例

如何强制2个div保持并排

2 个答案: