使用 html/css 在移动设备上将 table 与图像叠加

Question

对这一切都很陌生，玩弄了一个两列按钮（某种），该按钮将具有彩色背景，一侧有一些文本和图像（也将是 link）在另一。

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

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

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

您可以花几个小时摆弄各种 html/css 设置，或者您可以花 20 分钟完成一个涵盖这方面和其他几个方面的教程。

对于非常简单的移动内容，请查看 Bootstrap。这是每个页面顶部的 brilliantly speedy tutorial that will get you started. Basically, Bootstrap involves just a few files that you need to reference at the top of your page and voila, you have some pretty cool functionality. If you reference these three files（转载于下方），您将可以访问所有超级简单的 Bootstrap 美妙功能，这些功能会自动为您处理不同的屏幕尺寸。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

此外，另一个值得检查的好东西是 Flexbox - this tutorial 值得 28 分钟的每一秒。

最后，查看 CSS 网格。抱歉，我没有很好的参考给你，但很容易找到一些好的 tuts。

Answer 2

我会使用 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>

使用 html/css 在移动设备上将 table 与图像叠加

Stacking a table with an image on mobile using html/css

html

css

css-tables