Question

我想在移动设备和桌面设备上实现这一目标 dev image。这是我所拥有的基础：

＆＃13;

.container {
  width: 90%;
  margin: 0 auto;
  position: relative;
}

@media screen and (min-width: 700px) {
  .image {
    float: right;
  }
  .text {
    float: left;
  }
}

＆＃13;

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

＆＃13;

我意识到flexbox根本不喜欢浮点数，但我希望内容能够为移动设备堆叠，并改变媒体查询的位置。

Answer 1

您可以为元素添加宽度吗？如果是这样，您可以指定文本元素的绝对位置，并设置＆＃34; top：100％;＆＃34;在移动和＆＃34;身高：100％;＆＃34;在移动设备和桌面设备上都可以做到这一点。

这样的事情：

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

Answer 2

在您的情况下，您可以使用bootstrap。 Bootstrap具有网格系统，允许您使用最少的编码。 https://v4-alpha.getbootstrap.com/layout/grid/

如何在使用浮点数时将div设置为与图像相同的高度而不指定高度

2 个答案: