Question

我有绝对定位的图像（在左侧），其中有一些div位于其中。在右侧，我有div定位浮动：右。有没有办法在触及浮动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

液体布局中的绝对div

1 个答案: