使文本保持在div内

Question

我遇到一个文本div留在容器内的问题。其他所有东西都可以扩展，但文本在它之外，我不知道如何解决它。

CSS：

.design-bg {
    height: 100%;
    width: 100%;
    background-image: url("/images/apicture.jpg")
}

.design-winner {
    height: 130px;
    width: 130px;
    padding-left: 20px;
    padding-top: 50px;
    float: left;
}

.design-winner-desc {
    width: 950px;
    padding-top: 30px;
    padding-left: 30px;
    margin-left: 130px;
}

.design-winner-pics {
    display: inline-block;
}

HTML：

<div class="design-bg">

<div class="design-winner">
    <img src="/images/picture.jpg" style="border-radius: 50%;">
</div>
<div class="design-winner-desc">
    <p><span style="font-size: 24px; color: #225083"><strong>Name here</strong></span><br><span style="font-size: 12px; color: #225083">Maybe a role here<br><br>Blah blah blah text text text</span></p>
</div>

<div class="design-winner-pics">
    <img src="/images/picture2.jpg">
    <img src="/images/picutre3.jpg">
    <img src="/images/picture4.jpg">
    <img src="/images/picture5.jpg">
</div>

这就是它在浏览器上的样子：

当我缩小它时会发生这种情况：

Answer 1

您的design-bg宽度设置为％，其他div设置为像素。尝试将其更改为％？

像这样（你可以设置像素的最小宽度）：

.design-bg {
    height: 100%;
    width: 100%;
    min-width: 1080px;
    background-image: url("/images/apicture.jpg")
}

.design-winner {
    height: 130px;
    width: 9%;
    padding-left: 20px;
    padding-top: 50px;
    float: left;
}

.design-winner-desc {
    width: 89%;
    padding-top: 30px;
    padding-left: 30px;
    margin-left: 130px;
}

Answer 2

嗯，你试过吗？ 明确：两者;

中的

命令

arr.every(val => {
  sth = val;
  return true;
});

}

^喜欢这个

我不完全确定这是不是问题，但它删除了任何浮动元素，我猜测它值得一试：D

我是初学者

Answer 3

尝试将.design-winner-desc的宽度设为最大宽度减去.design-winner的宽度。如果要开发符合CSS3的浏览器，可以使用calc（）函数。

Î