css - 液体布局中的绝对div

Question

我有绝对定位的图像(在左侧)，其中有一些 div 的相对定位。在右侧，我将 div 定位为 float: right。有没有办法在触摸 float div 时调整图像大小？不是浏览器的边缘。现在我做了这样的东西

@media screen and (max-width: 1860px){ .content-image img { max-width: 1250px; } }
@media screen and (max-width: 1780px){ .content-image img { max-width: 1200px; } }
@media screen and (max-width: 1710px){ .content-image img { max-width: 1150px; } }
@media screen and (max-width: 1640px){ .content-image img { max-width: 1100px; } }
@media screen and (max-width: 1570px){ .content-image img { max-width: 1050px; } }
@media screen and (max-width: 1500px){ .content-image img { max-width: 1000px; } }
@media screen and (max-width: 1430px){ .content-image img { max-width: 950px; } }
@media screen and (max-width: 1360px){ .content-image img { max-width: 900px; } }
@media screen and (max-width: 1290px){ .content-image img { max-width: 850px; } }
@media screen and (max-width: 1220px){ .content-image img { max-width: 800px; } }
@media screen and (max-width: 1150px){ .content-image img { max-width: 750px; } }
@media screen and (max-width: 1080px){ .content-image img { max-width: 700px; } }
@media screen and (max-width: 1010px){ .content-image img { max-width: 650px; } }

但也许有更清洁的方法？也许更简单？

Answer 1

将图像放在一个 div 中。对于 CSS，使用以下内容:

#image-container {
  margin-right: 20%;
  position: absolute;
}
#right-div {
  float: right;
  width: 20%;
}
.content-image {
  max-width: 100%;
}

Fiddle