Question

我是Web开发这个伟大世界的新手。我的问题是让我的浮动从浮动左移到浮动无关于媒体查询。我想要完成的是让我的3个图像在体内从水平变为垂直。我试图使我的网站响应，但每次我放入浮动无最大宽度700px ...没有骰子。请帮忙！在这一点上，我无缘无故地打字这个网站说明我需要更多详细信息。

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

OP的评论：

大笑由于某种原因它可以在这里工作但是当我拉动时它不起作用它在当地

表示您遗漏了viewport meta tag，将其添加到head

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

OP的回答评论：

当我将display none设置为none但是当我放置float时，媒体查询有效没有它不起作用。然而，当我在这里上传时它会起作用

你有一些特异性问题，这个属性（float）在其他地方被推翻，你需要更具体，比如.parent .section {float:none}，

媒体查询问题？

1 个答案: