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

Question

我正在关注 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;
}

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

您还没有完成 head 标签并在您的 head 标签中提及所有 body 内容。

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

Unable to get Dynamic (Mobile) website design working properly

html

css

mobile-website