如何在Materialized CSS的移动设备上更改水平卡的布局? [英] How to change layout of Horizontal Cards in Materialize CSS on mobile?

查看:60
本文介绍了如何在Materialized CSS的移动设备上更改水平卡的布局?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试创建类似于此:图片和文字应在台式机和平板电脑上并排放置.在移动设备上,它们应显示在一列中,图像或文字在顶部,另一列在其下方.我正在使用Materialize CSS中的水平卡来执行此操作.但是,在移动设备上,卡仍然以水平格式显示.有没有什么方法可以使用Materialize CSS进行更改?

I'm trying to create a layout that's similar to this: the image and text should be side-by-side on desktop and tablet. On mobile, they should show up in one column with either the image or the text on top and the other below it. I'm using the Horizontal Cards from Materialize CSS to do this. However, on mobile, the cards still show up in a horizontal format. Is there any way to change this using Materialize CSS?

这是我当前的代码:

This is my current code:

  <div class="col s12 m6 l6">    
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://images.unsplash.com/photo-1454994834218-5ffbb76c0e74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dddc4ee524eee04e325dbc73367391d8">
      </div>
      <div class="card-stacked">
        <div class="card-content valign-wrapper">                       
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card-action">
          <a href="#">Sample Link</a>
        </div>
      </div>
    </div>
  </div>   
<style>
    .card-content{
        margin:0 30% 0 30px;
    }
</style>


我也在
此处尝试过代码,但是图像被剪裁掉了,卡的布局是即使在移动设备上仍然是水平的.


I've also tried the codes here, but the image gets cut off and the card layout is still horizontal even on mobile.

<div class="sample">    
      <div class="row">
        <div class="col s12 m6 l6 left-image">
        </div><!-- /col s12 m6 left-image -->
        <div class="col s12 m6 l6 text-right">
          <div class="test">          
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>            
          </div><!-- /col s12 m6 icon-text -->          
        </div><!-- /col s12 m6 text-right -->
      </div><!-- /row -->    
  </div>
<style>
.sample>.row{
  display:flex;
}

.sample>.row>.col{
    align-items: center;
    display: flex;
    flex: 1;
    justify-content:center;
    text-align: center;
}

.sample>.row>.col.left-image{
  background:url("https://images.unsplash.com/photo-1454994834218-5ffbb76c0e74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dddc4ee524eee04e325dbc73367391d8");
  background-size:cover;
  height: auto;
}  
</style>


另外,是否有一种方法可以使图像和文本在台式机和平板电脑上保持对齐或具有几乎相同的高度,而又不会切断图像?


Also, is there a way to keep the image and the text aligned or with nearly the same height on desktop and tablet, but without cutting off the image?

推荐答案

在GitHub上有一个pull请求,该请求完全实现了您想要的内容.拉取请求用sass编写.这是它的编译结果:

There is a pull request on GitHub that implements exactly what you want. The Pull request is written in sass. This is what it compiles to:

@media only screen and (min-width: 601px) {
  .card.responsive-horizontal {
    display: flex;
  }
  .card.responsive-horizontal.small .card-image, .card.responsive-horizontal.medium .card-image, .card.responsive-horizontal.large .card-image {
    height: 100%;
    max-height: none;
    overflow: visible;
  }
  .card.responsive-horizontal.small .card-image img, .card.responsive-horizontal.medium .card-image img, .card.responsive-horizontal.large .card-image img {
    max-height: 100%;
    width: auto;
  }
  .card.responsive-horizontal .card-image {
    max-width: 50%;
  }
  .card.responsive-horizontal .card-image img {
    border-radius: 2px 0 0 2px;
    width: auto;
    max-width: 100%;
  }
  .card.responsive-horizontal .card-stacked {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .card.responsive-horizontal .card-stacked .card-content {
    flex-grow: 1;
  }
}

如果您正在寻找此版本的Sass,或者想要更多信息,请查看 在GitHub上的拉取请求.

If you are looking for the sass version of this or you want more information, have a look at the pull request on GitHub.

这篇关于如何在Materialized CSS的移动设备上更改水平卡的布局?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆