html - float div 内的文本换行问题

Question

当屏幕宽度太窄无法在一行中显示所有文本时，我无法将框右侧的文本换成两行。相反，整个右侧在左侧下方隆起。

我如何让它换行成两行？这是 fiddle

.box {
    height: 80px;
    clear: both;
}
.left {
    width: 90px;
    float: left;
    margin-right: 8px;
    height: 80px;
    border: 1px solid #ccc; 
}
.right {
    float: left;
}

Answer 1

您在 .right 上所要做的就是添加大约 40% 左右的宽度，并且随着页面变小，它应该只是文本换行。

.right {
    float: left;
    width: 40%;
}