html - 使用 html/css 在移动设备上堆叠带有图像的表格

Question

这一切都非常新，并且尝试使用一个两列按钮(某种)，该按钮将具有彩色背景，一侧带有一些文本，另一侧带有图像(也将是一个链接)。

我也希望它能堆叠在移动设备上。我使用此处找到的其他代码片段取得了一些成功，但我不能完全正确 - 主要是我的“按钮”的左侧没有填满整个侧面。

可能有一个非常简单的解决方案，但我现在似乎找不到!

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  align-content: center;
}

.row {
  max-width: 280px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <p>Some text..</p>
  </div>
  <div class="column">
    <img src="https://gallery.mailchimp.com/e31ffc7f9716689ceb3f1e8be/images/65235be8-d229-4c50-801e-36f5bccbf429.jpg">
  </div>
</div>

Answer 1

我会使用 flex 而不是 float(优点是你得到等高的列):

* {
  box-sizing: border-box;
}

.column {
  width: 50%;
}

.column>img {
  width: 100%;    /* just makes the image resize to the column */
  display: block; /* removes space below image */
}

.row {
  max-width: 280px;
  display: flex;   /* use flex instead of floats */
}

@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;  /* change direction of flex to columns at small screen size */
  }
  .column {
    width: 100%;              /* make column full width */
  }
}

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <p>Some text..</p>
  </div>
  <div class="column">
    <img src="https://gallery.mailchimp.com/e31ffc7f9716689ceb3f1e8be/images/65235be8-d229-4c50-801e-36f5bccbf429.jpg">
  </div>
</div>