Question

我一直试图仅在媒体屏幕上禁用float:left。
但是它仍然使用float:left。
我没有媒体上有float:left。

@media only screen and (max-width: 600px) {
  .twitter_page {
    padding: 0 108px 0 0;
    margin-left: -3px;
    float: none;
  }
}

.twitter_page {
  float: left;
  padding: 0 218px 0 0;
  /* border: solid; */
  margin-right: -109px;
  margin-left: 54px;
}

<div class="twitter_page">
  <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 350px; height: 400px; padding: 0px; border: none; max-width: 100%; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;"
    data-widget-id="profile:AZLily_official" title="Twitterタイムライン"></iframe>
  <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

网站Link

Answer 1

您的CSS从上到下进行了解析。将媒体查询放在文档的底部，您将获得所需的内容。

.twitter_page {
  float: left;
  padding: 0 218px 0 0;
  /* border: solid; */
  margin-right: -109px;
  margin-left: 54px;
}

@media only screen and (max-width: 600px) {
  .twitter_page {
    padding: 0 108px 0 0;
    margin-left: -3px;
    float: none;
  }
}

<div class="twitter_page">
  <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 350px; height: 400px; padding: 0px; border: none; max-width: 100%; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;"
    data-widget-id="profile:AZLily_official" title="Twitterタイムライン"></iframe>
  <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Answer 2

您的CSS没什么问题，但定位问题。您先写了媒体CSS然后是普通CSS，因此在这种情况下，媒体CSS将被普通CSS覆盖。

尝试一下

.twitter_page {
    float: left;
    padding: 0 218px 0 0;
    margin-right: -109px;
    margin-left: 54px;
}
@media only screen and (max-width: 600px){
    .twitter_page{
        padding: 0 108px 0 0;
        margin-left: -3px;
        float: none;
    }
}

仅在媒体屏幕上禁用浮动

2 个答案: