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

Question

我有 2 张纵向堆叠但横向相邻的卡片。我想让两张卡片在横向上彼此垂直对齐。即，第一张卡片的文字应与图像的中间对齐。我尝试了 flex 选项，但这破坏了响应式设计。帮助不大。谢谢。

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

CSS:

@media only screen and (orientation:landscape){
    .land6{width:49%}}

Answer 1

如果您不想使用 flexbox ，那么您将需要另一种方法:

@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%;
}

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