Question

我正在尝试创建一个类似于this的布局：图片和文字应该在桌面和平板电脑上并排显示。在移动设备上，它们应显示在一列中，图像或文本位于顶部，另一列位于其下方。我正在使用Materialise CSS中的Horizontal Cards来执行此操作。但是，在移动设备上，这些卡仍然以横向格式显示。有没有办法使用Materialise CSS来改变它？

这是我目前的代码：

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

我也尝试了代码here，但是图像被切断了，即使在移动设备上，卡片布局仍然是水平的。

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

此外，有没有办法在桌面和平板电脑上保持图像和文字对齐或几乎相同的高度，但没有切断图像？

Answer 1

GitHub上有一个pull请求，可以完全按照你的意愿实现。 Pull请求是用sass编写的。这就是它编写的内容：

@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上的the拉取请求。

如何在移动设备上更改Materialize CSS中水平卡的布局？

1 个答案: