Javascript css在固定宽度内浮动两个同级，一个同级包含推动同级的元素

我很难解释这个问题，因为有很多变量

我有一个网站，它使用javascipt来调整一个固定的包裹大小，这取决于屏幕上的解决方案，所以所有的div都必须调整到3种不同的宽度，这就是它使这个问题如此困难的原因

HTML

显然，一旦有3个以上的项目，.contentContainer就会被推到.sideNav下面，因为没有足够的空间。我不能浮动.sideNav并将240px的左边距放在那里，因为有时.sideNav不会在那里，有没有办法解决这个问题并找到一个平衡点，这样页面上的内容就可以很好地流动

我现在只学了两个月的css，所以他们可能是我不知道的解决方案。。。。我真的不知道或不太了解css，但也许有一个答案

如果需要，我可以发布完整的标记和css

---

只想提前对任何能帮忙的人说声谢谢

您可以为项目使用百分比，如

.time{width:20%}

。它们根据.contentContainer元素的宽度调整大小，您可以将其设置为

width:100%

。注意你的填充和边距，因为它们在默认浏览器框模式下与你的宽度相加。

如果列表中的所有图像尺寸相同，请将它们设置为

.item img { width: 240px; height: 180px; }

而不是在每个图像上都有相同的样式

---

实际上，最好在img中设置width=“240”和height=“180”以减少页面加载时间，即“告诉”浏览器图像的确切尺寸。

谢谢您的帮助，但是如果我设置.contentContainer{width:100%}，它会将其折叠到.sideNav下面，还有一个带有javascript的变量，它将包裹大小调整为240x4或240x5或240x6，从而改变百分比Hanks是的，我已经这样做了，这只是为了更好地理解布局的示例。。好的-那没问题：-）

.wrap {
  width: 960px; or width: 1110px; or width: 1350px depending on screen res; /* all sizes which would fix 240px 4,5 or 6 times across*/
}
.sideNav {
width: 240px;
float: left;
}
contentContainer {
float: left;
}
.item {
width: 240px;
width: 180px;
}

.item img { width: 240px; height: 180px; }