Question

我有一个包含并排图像的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>

Answer 1

你的代码可能是

.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>

检查并告诉我

Answer 2

以下是演示：http://codepen.io/theskumar/full/tHwjo

可以在此处找到codepen：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%;
}

干杯，

两个图像，一个调整大小，一个不调整大小

2 个答案: