css - 在使用浮点数时如何在不指定高度的情况下使div与图像的高度相同

我想在移动设备和台式机上实现这一目标，这是
dev image。
这是我拥有的基础：

.container {
  width: 90%;
  margin: 0 auto;
  position: relative;
}

@media screen and (min-width: 700px) {
  .image {
    float: right;
  }
  .text {
    float: left;
  }
}

<div class="container clear">
  <div class="image"><img src="some-image" /></div>
  <div class="text">some text</div>
</div>

我意识到flexbox根本不喜欢浮点数，但是我希望内容可以在移动设备上堆叠，并更改媒体查询的位置。

最佳答案

您可以为元素增加宽度吗？
如果是这样，则可以为文本元素指定绝对位置，并设置“ top：100％;”。在移动设备中，“身高：100％”；在移动设备和台式机上都可以做到。

像这样：

<style type="text/css">
    .container {
        position: relative;
        width: 90%;
        margin: 0 auto;
    }

    .image {
        width: 100%;
        background: blue;
        text-align: center;
    }

    .text {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        background: red;
        text-align: center;
    }

    @media screen and (min-width: 700px) {
        .container {
            overflow: hidden;
        }

        .image {
            width: 50%;
            float: right;
        }

        .text {
            top: auto;
            left: auto;
            width: 50%;
            float: left;
        }
    }
</style>

关于css - 在使用浮点数时如何在不指定高度的情况下使div与图像的高度相同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43903909/