HTML更改

Question

我有这个JSFiddle： http://jsfiddle.net/ao9k1m20/4/

CSS：

.wrapper{
    width:470px; 
    float:left; 
    height:637px;
}
.container {
  position: relative;
  margin: 0;
  padding: 0;
  text-align: left; border:5px solid #187BB7;
  background-size:auto; 
  height:610px;
}
#container1{
    background-image:url(http://i2.wp.com/theultralinx.com/wp-content/uploads/2015/02/tumblr_njxiyeoMUt1qkegsbo1_500.jpg?resize=450%2C610);
}
#container2{
    background-image:url(http://decoratedlife.com/wp-content/uploads/2013/05/pinterest-small-room.jpg);
}
img.info-icon{
  cursor: pointer;
  z-index: 1001;
  background-color:white;
}
#container1 .info-icon1{
  position: absolute;
  top: 250px;
  left: 250px;
}
#container1 .info-icon2{
  position: absolute;
  top: 100px;
  left: 100px;
}
#container1 .info-icon3{
  position: absolute;
  top: 300px;
  left: 80px;
}
#container2 .info-icon1{
  position: absolute;
  top: 250px;
  left: 250px;
}
#container2 .info-icon2{
  position: absolute;
  top: 100px;
  left: 100px;
}
#container2 .info-icon3{
  position: absolute;
  top: 300px;
  left: 80px;
}

HTML：

<div>
    <div class="wrapper">
        <!--Left Col-->
      <div class="container" id="container1">
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon1" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon2" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon3" data-target="pop5"  />
      </div>

        <!--Right Col-->
        <div class="container" id="container2">
            <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon1" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon2" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon3" data-target="pop5"  />
        </div>

    </div>
</div>

它有两个排列在一起的浮动div，但是当浏览器调整大小（未最大化或者在ipad /平板电脑中查看）时，另一个div会关闭。我希望将它并排显示，比如之前的比较，一些指针图像在点击时会显示一个细节弹出窗口。

我的问题是我如何以这样的方式调整两个div的大小，并且当浏览器调整大小或在网站内查看网站时，它们内部的小指针也会调整大小并正确定位片剂/ ipad的？

请建议，谢谢！

Answer 1

看看这是否符合您的需求。我应用此处给出的概念（http://www.mademyday.de/css-height-equals-width-with-pure-css.html）来保持比率。

http://jsfiddle.net/vleong2332/4Lft1qdy/2/

HTML更改

<div>
    <div class="wrapper">
        <!--Left Col-->
      <div class="container">
          <div class="inner_container" id="container1">
              .
              .
          </div>
      </div>

`

CSS更改

* {
    box-sizing: border-box;
}
.container {
  position: relative;
  display: inline-block;
  width: 49%;
  margin: 0;
  padding: 0;
  text-align: left;
}
.container:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.inner_container {
    background-size:100% auto;
    background-repeat: no-repeat;
    border:5px solid #187BB7;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
img.info-icon{
  cursor: pointer;
  z-index: 1001;
  background-color:white;
  width: 7%;
}
#container1 .info-icon1{
  position: absolute;
  top: 65%;
  left: 70%;
}

根据那篇文章，你在具有100％padding-top的（外部）容器中插入一个:: before伪元素 - 这将推动div的高度以1：1的比例匹配宽度。然后，包含图像的div绝对位于左上角。我希望这篇文章有道理。

对于放大镜图标，我将定位和宽度更改为百分比，以便适应图像的宽度。

Answer 2

这样的东西？ http://jsfiddle.net/vecf7abj/21/

如上所述，这利用浮动和宽度百分比：

float:left;
width:50%;

还清理了一些其他代码，以便在该div中进行垂直对齐。

如何在浏览器大小调整中保持两个div和图像并排？

2 个答案:

HTML更改

CSS更改