html - 媒体查询的烦恼？

Question

我是网络开发这个伟大世界的新手。我的问题是在媒体查询中让我的 float 从左浮动变为无 float 。我想要完成的是让我的正文中的 3 个图像从水平变为垂直。我试图让我的网站响应，但每次我在最大宽度 700px 时放入 float none ......没有骰子。请帮忙!在这个品脱中，我无缘无故地打字，因为这个网站声明我需要在我的帖子 smh 中提供更多详细信息。

body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}


/**************
Section one
**************/

#section-one-container {
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
}

.section-one {
  float: left;
  width: 31.25%;
  margin-right: .833%;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}


/***********
Media Q
***********/

@media only screen and (max-width:700px) {
  .section-one {
    float: none;
    width: 100%;
    text-align: center;
  }
}

<section>
  <div id="section-one-container">
    <div class="section-one">
      <figure>
        <img src="https://i0.wp.com/opensourceforu.com/wp-content/uploads/2011/01/mysql-queries-1.jpg?resize=600%2C381">
      </figure>
      <h1>Questions</h1>
      <p>I have question,I have question,I have question,I have question,I have question,I have question,I have question,I have question</p>
    </div>
    <div class="section-one">
      <figure>
        <img src="https://i0.wp.com/opensourceforu.com/wp-content/uploads/2011/01/mysql-queries-1.jpg?resize=600%2C381">
      </figure>
      <h1>Questions</h1>
      <p>I have question,I have question,I have question,I have question,I have question,I have question,I have question,I have question</p>
    </div>
    <div class="section-one">
      <figure>
        <img src="https://i0.wp.com/opensourceforu.com/wp-content/uploads/2011/01/mysql-queries-1.jpg?resize=600%2C381">
      </figure>
      <h1>Questions</h1>
      <p>I have question,I have question,I have question,I have question,I have question,I have question,I have question,I have question</p>
    </div>
  </div>
</section>

Answer 1

OP 的相关评论:

Lol for some reason it works on here but it doesn't work when I pull it up locally

这意味着您缺少 viewport meta tag ，将其添加到您的 head

<meta name="viewport" content="width=device-width, initial-scale=1">

OP 在回答中的评论:

The media query works when I put display none but when I put float none it doesn't work. Yet it works when I uploaded it here

你有一些关于特异性的问题，这个属性(float)在其他地方被否决了，你需要更具体，比如 .parent .section {float:none},