无法使动态（移动）网站设计正常工作答案

【问题标题】：Unable to get Dynamic (Mobile) website design working properly无法使动态（移动）网站设计正常工作
【发布时间】：2019-09-12 05:23:48
【问题描述】：

我正在关注 This Guide 并排放置图像。在 PC 等较大的显示器上看起来不错：

但在移动设备上我得到了这个：这显然是不对的，但该网站确实提到添加此功能以支持移动设备：

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

但是当我添加它时，它会改进它：但不能解决问题，我需要图像在移动设备上从上到下而不是左右，如Demo On The Site 所示。我该如何解决这个问题？

这是我的 HTML 脚本（这是一个测试，所以我理解它是最基本的）：

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <meta name="description" content="Ultra Gamer Text">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ultra Gamer test</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">

      <div class="row">
        <div class="column">
            <a href="https://example.com" target="_blank">
              <img src="./img/Testimage.png" alt="https://example.com" target="_blank">
            </a>
              <div class="textLink">
                <h3><a href="https://example.com" target="_blank">Test</a></h3>
              </div>
        </div>
          <div class="column">
            <a href="https://example.com" target="_blank">
                <img src="./img/Placeholder.png" alt="https://example.com" style="width:300px;height:300px;" target="_blank">
            </a>
            <div class="textLink">
              <h3><a href="https://example.com" target="_blank">Test</a></h3>
        <div class="column">
          <a href="https://example.com" target="_blank">
            <img src="./img/Placeholder.png" alt="https://example.com" style="width:300px;height:300px;" target="_blank">
          </a>

    <footer>


    </footer>

</body>



</html>

这是我的图片 CSS 代码：

a
{
  /* Removes underlines from links */
  text-decoration: none;
  color: black;
}

/* When mouse is hovering over text */
a:hover
{
     color: rgb(85, 85, 85);
     text-decoration:none;
     cursor:pointer;
}

/* When mouse is hovering over an image */
img:hover
{
  filter: brightness(0.8);
}
body
{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  background-color: #f0f0f0;
  padding: 0;
  margin: 0;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
 float: left;
 width: 33.33%;
 padding: 5px;
 text-align: center;
 width:90px
}

/* Clear floats after image containers */
.row::after
{
 content: "";
 clear: both;
 display: table;
 text-align: center;
}

.row
{
  display: flex;
}

.column
{
  flex: 33.33%;
  padding: 5px;

}

.textLink
{
  color: black;
}

@media screen and (max-width: 500px) {
  .column {
    float:inherit;
    width: 100%;
  }
}
footer
{
  text-align: center;
  padding: 12px;
}

【问题讨论】：

请在此处添加您的代码以便更好地理解屏幕截图。
请向我们展示您的代码，以便我们检查出了什么问题。谢谢
还有：stackoverflow.com/help/minimal-reproducible-example
不要低估minimal reproducible example的力量
分享你的html

标签： html css mobile-website

【解决方案1】：

您的代码需要进行很多更改，请将您的代码与我的代码进行比较。 html 和 css 两者都有

*{
  box-sizing: border-box;
}
a
{
  text-decoration: none;
  color: black;
}
a:hover
{
  color: rgb(85, 85, 85);
  text-decoration:none;
  cursor:pointer;
}
img:hover
{
  filter: brightness(0.8);
}
body
{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  background-color: #f0f0f0;
  padding: 0;
  margin: 0;
}
.row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.column {
  width: 33.33%;
  padding: 5px;
  text-align: center;
  flex: 0 0 33.33%;
}
.textLink
{
  color: black;
}
footer
{
  text-align: center;
  padding: 12px;
}
@media screen and (max-width: 500px) {
  .column {
    flex: 0 0 100%;
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="description" content="Ultra Gamer Text">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ultra Gamer test</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="row">
    <div class="column">
      <a href="https://example.com" target="_blank">
        <img src="./img/Testimage.png" alt="https://example.com" target="_blank">
      </a>
      <div class="textLink">
        <h3><a href="https://example.com" target="_blank">Test</a></h3>
      </div>
    </div>
    <div class="column">
      <a href="https://example.com" target="_blank">
        <img src="./img/Placeholder.png" alt="https://example.com"  target="_blank">
      </a>
      <div class="textLink">
        <h3><a href="https://example.com" target="_blank">Test</a></h3>
      </div>
    </div>
    <div class="column">
      <a href="https://example.com" target="_blank">
        <img src="./img/Placeholder.png" alt="https://example.com"  target="_blank">
      </a>
      <div class="textLink">
        <h3><a href="https://example.com" target="_blank">Test</a></h3>
      </div>
    </div>
  </div>
  <footer>
  </footer>
</body>
</html>

你没有完整的头部标签，并在你的头部标签中提到你的所有身体内容。

【讨论】：

我的 HTML 脚本很好，但您解决了一些编译错误，谢谢。请问你对 .row 和 .colum 做了什么来让它们工作？