1

我有一个包含并排图像的 800px div，第一个是照片，另一个是地图。由于 300px 地图的细节在缩小时使其无用，我不希望它在较小的屏幕上调整大小。但是，照片应该无限期地调整大小，而不会强制地图环绕并出现在其下方。

我猜用两个单独的容器会更容易，但是只有一个容器可以吗？目前的代码是：

.container {
  width: 800px;
  max-width: 100%;
}
.photo {
  float: left;
  max-width: 100%;
  height: auto;
}
.map {
  float: right;
  width: 300px;
  height: 250px;
}

<div class="container">
  <img class="photo" src="photo.jpg">
  <img class="map" src="map.png">
</div>
4

2 回答 2

0

您的代码可能是

.container {
  width: 800px;
  max-width: 100%;
white-space:nowrap;
overflow:auto;
    }
    .photo {
      float: left;
width:calc(100%-300px);
      max-width: 100%;
      height: auto;
    }
    .map {
      float: right;
      width: 300px;
min-width:300px;
      height: 250px;
    }

<div class="container">
  <img class="photo" src="photo.jpg">
  <img class="map" src="map.png">
</div>

检查并告诉我

于 2013-09-27T19:35:45.830 回答
0

这是一个演示：http ://codepen.io/theskumar/full/tHwjo

代码笔可以在这里找到：http ://codepen.io/theskumar/pen/tHwjo

使用浏览器调整大小来查看效果。

html

<div class="container">
  <div class="photo"><img src="http://placehold.it/400x400"> </div>
  <div class="map"><img src="http://placehold.it/300x400"></div>
</div>

css 

.container{
  position: relative;

  /* for demo */
  width: 90%;
  margin: 0 auto;
}

.photo {
  margin-right: 300px;

  /* for demo */
  height: 400px;
  border: 4px solid red;
}

.map {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;

  /* for demo */
  border: 3px solid blue;
  height: 400px;
}

img {
  width: 100%;
  height: 100%;
}

干杯，

于 2013-09-27T19:55:16.347 回答