未遵循媒体查询宽度

发布于 2024-12-10 14:43:03 字数 597 浏览 0 评论 0原文

我目前有一个包含 3 个部分的页脚，布局如下：

.foot1, .foot2, .foot3 { width: 33%; float: left; }
.foot2 { margin: 0 0.5%; }

我希望它们更改 768px 和 480px 的布局。在 768px 处，我有以下内容（将第一个堆叠在顶部，#2 和 3 分割其下方的空间）：

.foot1 { width: 98%; float: none; margin: 0 1%; }
.foot2, .foot3 { width: 48%; margin: 0 1%; }

在 480px 处（将所有 3 个堆叠起来并占据宽度）我有：

.foot2, .foot3 { width: 98%; float: none; }

我的问题是在 480px 及以下，宽度没有被遵循，仍然保持在 48%。如果我在 Chrome 中使用“inspect”，我可以看到“float: none;”正在被跟踪，但不是媒体查询的宽度。

有谁知道为什么它会选择识别浮动声明而不是宽度：98％？

谢谢！

原文

I currently have a footer with 3 sections layed out as follows:

.foot1, .foot2, .foot3 { width: 33%; float: left; }
.foot2 { margin: 0 0.5%; }

I want them to change layout at 768px and 480px. At 768px, I have the following (to stack the first on top, with the #2 & 3 splitting the space underneath it):

.foot1 { width: 98%; float: none; margin: 0 1%; }
.foot2, .foot3 { width: 48%; margin: 0 1%; }

At 480px (to have all 3 stack and take up the width) I have:

.foot2, .foot3 { width: 98%; float: none; }

My problem is that at 480px and under, the widths are not being followed and are still staying at 48%. If I use 'inspect' in Chrome, I can see that the 'float: none;' is being followed, but not the width from the media-query.

Does anyone have any idea why it would choose to recognize the float declaration but not the width: 98%?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

血之狂魔 2024-12-17 14:43:03

我尝试重现您遇到的问题，但未能成功。

我相信我下面的测试代码可以按照您的意愿工作。你的代码与下面的 html/css 有什么不同？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .foot1 { background: tan }
    .foot2 { background: green }
    .foot3 { background: blue }
    .foot1, .foot2, .foot3 { width: 33%; float: left; }
    .foot2 { margin: 0 0.5%; }
    @media screen and (max-width: 768px) {
      .foot1 { width: 98%; float: none; margin: 0 1%; }
      .foot2, .foot3 { width: 48%; margin: 0 1%; }
    }
    @media screen and (max-width: 400px) {
      .foot2, .foot3 { width: 98%; float: none; }
    }
  </style>
</head>
<body>
<div class="foot1">foot1</div><div class="foot2">foot2</div><div class="foot3">foot3</div>
</body>
</html>

I attempted to reproduce the issue you are having but was unable to do so.

I believe that my test code below works as you desire. How is your code different from the below html/css?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .foot1 { background: tan }
    .foot2 { background: green }
    .foot3 { background: blue }
    .foot1, .foot2, .foot3 { width: 33%; float: left; }
    .foot2 { margin: 0 0.5%; }
    @media screen and (max-width: 768px) {
      .foot1 { width: 98%; float: none; margin: 0 1%; }
      .foot2, .foot3 { width: 48%; margin: 0 1%; }
    }
    @media screen and (max-width: 400px) {
      .foot2, .foot3 { width: 98%; float: none; }
    }
  </style>
</head>
<body>
<div class="foot1">foot1</div><div class="foot2">foot2</div><div class="foot3">foot3</div>
</body>
</html>

回复收藏 0 原文

~没有更多了~