Question

我有以下问题。我有一个分为两个div左右的块，左边包含640x461的图像，右边的一个分割成两个div。一个包含文本，在其下面是一个图像640x342。在移动网站上，这些图像位于每个其他图像（640x461）之下，文本块然后是图像（640x342），但是使用媒体（例如@media（min-device-width：568px）给出不同的屏幕尺寸）右边的div（文本+ img）应该漂浮在左边div旁边，但问题是左边图像的高度仍然小于右边div的高度。我该怎么办？

HTML：

<div class="block_acc">
  <div class="lp-bild-left">
    <a>
      <img src="640x461.jpg" />
    </a>
  </div>
  <div class="lp_column">
    <div class="lp_description">
      <div class="lp_textbox_wrapper">
        <span class="headline">text</span>
      </div>
    </div>
    <div class="lp-bild-right">
      <img src="640x342.jpg" />
    </div>
  </div>
</div>

CSS：

@media (min-device-width: 568px) {
  .lp-bild-left{
    float: left;
    width: 50%;
  }
  .lp_column {
    float: left;
    width: 50%;
  }
}

Answer 1

好的，请检查此代码：

<div class="block_acc">
  <div class="lp-bild-left">
    <a href="#">
      <img src="http://planeon.net/wp-content/uploads/hot-air-balloon.jpg" />
    </a>
  </div>

  <div class="lp_column">
    <div class="lp_description">
      <div class="lp_textbox_wrapper">
        <span class="headline">text</span>
      </div>
    </div>

    <div class="lp-bild-right">
      <img src="http://www.whudat.de/images/Albuquerque-Balloon-Fiesta_4.jpg" />
    </div>
  </div>
</div>

... CSS

.block_acc {
  display: block;
  overflow: hidden;
}

@media (min-device-width: 568px) {
  .lp-bild-left {
    float: left;
    width: 50%;
  }
    .lp-bild-left img {
      height: auto;
      width: 100%;
    }

  .lp_column {
    float: left;
    width: 50%;
  }
    .lp_column .lp-bild-right {
      max-width: 100%;
    }
      .lp_column .lp_textbox_wrapper {
        line-height: 0;
      }
        .lp_column .lp_textbox_wrapper .headline {
          font-size: 1vw;
          line-height: normal;
        }

      .lp_column .lp-bild-right img {
        width: 130%;
      }
}

https://fiddle.jshell.net/jonathanzuniga/at57emmd/

使用不同媒体查询的图片大小

1 个答案: