Question

我有2张卡片纵向堆叠但在风景中彼此相邻。我希望2张卡在横向上垂直对齐。即第一张卡片的文字应与图像中间对齐。我尝试了flex选项，但在响应式设计中打破了。没什么帮助。感谢。

zip()

css：

<div class="land6">
    <header>
        <h4>T++++</h4>
    </header>
    <div>
        <p>ipsom lorem</p>
    </div>
</div>
<div class="land6">
    <div>
        <img class="right" src="/Thumbs.jpg" width="100%" />                   
    </div>
</div>

Answer 1

如果您不想使用弹性盒，那么您将需要另一种方法：

＆＃13;

@media only screen and (orientation:portrait) {
  
  .land6 {
    display: block;
    width: 100%;
  }
}

@media only screen and (orientation:landscape) {

  .wrapper {
    white-space: nowrap;
  }

  .land6 {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
  }
}



.land6 img {
  width: 100%;
}

＆＃13;

<div class=wrapper>
  
  <div class="land6">
    <header>
        <h4>Some header</h4>
    </header>
    <div>
        <p>ipsom lorem</p>
    </div>
  </div>
  <div class="land6">
    <div>
      <img class="right" src="http://www.wfn360.com/wp-content/uploads/2014/04/thumb.jpeg" />                   
    </div>
  </div>
<div>

＆＃13;

Answer 2

如果从纵向移动到横向时样式没有改变，那么您不需要在此处插入媒体查询。

要使每张卡片相互叠加，请以父亲的全宽度为例：width:100%这样就不会让其他卡片保持下一个。

要使文本位于图像中间，如果您已将它们相互堆叠，只需使用text-align:center即可解决问题

在响应式设计中垂直对齐2个div

2 个答案: