css - 使用vue素材搭建服务描述页面，无法让Text和Image叠加

Question

如何确保当屏幕小于 768px 时。文本和图像将相互堆叠。

具有包含内容和图像的 md-column 属性的 md-layout 将在屏幕缩小到平板电脑、移动设备和超小屏幕(如有必要)时扩展整个页面。

<md-layout md-row md-sm-columns>

    <md-layout md-column="5"> <p class = "md-display-1"> Connect Soft documents </p>

  <p class = "">Allow documents that feed into each other to provide a consistent, untainted view of what your institution is doing.</p>

  </md-layout>


  <md-layout md-column="7">0</md-layout>



</md-layout>


<md-layout md-row md-sm-columns>

  <md-layout md-column = "7">

  <md-image md-src = "../assets/Statistics.png">

  </md-image>

  </md-layout>


  <md-layout md-column = "3"> <p class = "md-display-1"> Improve decision models</p>

  <p class = "">Use statistical modelling to identify patterns and anomalies in the data that can help you make better decisions.</p>


  </md-layout>



</md-layout>


<md-layout md-row md-sm-columns>

    <md-layout md-column="5"> <p class = "md-display-1">Search. Get what is important to You! </p>

  <p class = "">All notifications and documents are indexed and archived so that you can find what is needed at all times.</p>

  </md-layout>


  <md-layout md-column="7">0</md-layout>



</md-layout>

<md-layout md-row md-sm-columns>

  <md-layout md-column="5">


  </md-layout>


    <md-layout md-column="7"> <p class = "md-display-1"> Collaborate with other apps! </p>

  <p> Connect to the tools you need to prevent wasting time using so many apps </p>

  </md-layout>



</md-layout>

Answer 1

我建议你花一个小时玩http://vuematerial.io/#/ui-elements/layout .在那里您会找到基本的使用信息，但我认为必须先使用它才能真正充分理解它。

我创建了一个简单(可能)的解决方案，如果这是您想要的；

<md-layout md-row md-sm-columns>

<md-layout md-column="7" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">

  <md-image md-src="http://via.placeholder.com/800x600">

  </md-image>

</md-layout>


<md-layout md-column="3">
  <p class="md-display-1"> Improve decision models</p>

  <p class="">Use statistical modelling to identify patterns and anomalies in the data that can help you make better decisions.</p>


</md-layout>

因此 - 使用 md-flex-xsmall="100"md-flex-small="50"md-flex-medium="33" 属性是一种方法。代码笔在这里:https://codepen.io/anon/pen/jwRoYZ

---

但一如既往 - 您也可以分配自己的类并直接通过 CSS 定位它(在 Flex 和 mediaqueries 的帮助下)；

 <md-layout md-row md-sm-columns>

<md-layout md-column="7" class="my-custom-class">

  <md-image md-src="http://via.placeholder.com/800x600">

  </md-image>

</md-layout>


<md-layout md-column="3">
  <p class="md-display-1"> Improve decision models</p>

  <p class="">Use statistical modelling to identify patterns and anomalies in the data that can help you make better decisions.</p>


</md-layout>

以及一些特殊的 CSS 媒体查询；

@media (max-width: 600px) {
  .my-custom-class {
    min-width: 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
  }
}

代码笔在这里:https://codepen.io/anon/pen/BZEeGw

---

关键字(可玩):CSS 媒体查询、Flex、VueMaterial