个人中心
gpt4 book ai didi

html - 如何仅在移动设备上清除 float ？当我删除平板电脑的媒体查询时，为什么我的移动媒体查询会受到影响？

转载 作者：行者123 更新时间：2023-11-28 03:43:09 25 4
gpt4 key购买 nike

我第一次尝试从头开始制作一个简单的 HTML/CSS 网站，我正在尝试针对手机和平板电脑对其进行调整。

但是当显示在设置为水平位置的手机上时，主要内容显示在导航栏旁边。我不知道如何清除媒体查询中的 float 。

此外，当我从我的 CSS 中删除平板电脑媒体查询时...它会影响手机媒体查询。这是为什么？

body {
  background-color: #EBF0DF;
  color: #000000;
  margin-bottom: 0;
  font-family: Verdana, Arial, sans-serif;
}

h1 {
  font-family: Papyrus, serif;
  font-size: 40px;
  background-color: #A8BF78;
  color: #000000;
  text-align: center;
  background-image: url(../site_assets/logo.png);
  background-repeat: no-repeat;
  background-position: 8%;
  background-size: 145px;
  margin-left: 110px;
  margin-right: 110px;
  height: 150px;
  line-height: 400%;
  margin-bottom: 15px;
  border-radius: 30px;
  margin-top: 10px;
}

h2 {
  font-family: Georgia, serif;
}

header, nav, main, footer {
  display: block;
}

nav {
  text-align: center;
  font-size: 25px;
  margin-bottom: 25px;
  margin-top: 25px;
}

nav a {
  text-decoration: none;
  border: 4px outset #CEDAB3;
  border-radius: 5px;
  color: #84A540;
  font-family: Verdana;
  padding: 5px;
}

nav a:link {
  color: #84A540;
}

nav a:visited {
  color: #A8BF78;
}

nav a:hover {
  color: #CEDBB3;
}

footer {
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  font-family: Verdana, sans-serif;
  font-style: italic;
  font-size: 13px;
  background-color: #CEDBB3;
}

#portlandimage {
  margin-top: 40px;
  margin-left: 10px;
}

#wrapper {
  width: 90%;
  min-width: 1200px;
  max-width: 1480px;
  margin-right: auto;
  margin-left: auto;
}

@media only screen and (max-width: 1024px) {
  body {
    margin: 0;
    padding: 0;
    background-image: none;
  }

  h1 {
    margin: 0;
  }

  nav {
    float: none;
    width: auto;
    padding: 0.5em;
  }

  nav a {
    padding: 1em;
  }

  main {
    padding: 1em;
    margin-left: 0;
    font-size: 90%;
  }

  footer {
    margin: 0;
  }

  #wrapper {
    width: auto;
    min-width: 0;
    margin: 0;
    box-shadow: none;
  }
}

@media only all and (max-width: 768px) {
  h1 {
    height: 100%;
    font-size: 1.5em;
    background-image: none;
    border-radius: 0;
    margin: 0;
    text-align: center;
  }

  nav {
    padding: 0;
  }

  nav a {
    float: left;
    padding: 0.5em;
    width: 75%;
    min-width: 6em;
    margin-left: 0.8em;
    margin-right: 0.5em;
  }

  main {
    padding-top: 0.1em;
    padding-right: 0.6em;
    padding-bottom: 0.1em;
    padding-left: 0.4em;
  }

  footer {
    padding-top: 1em;
    padding-bottom: 1em;
    font-style: normal;
  }

  #portlandimage {
    display: none;
  }

  #wrapper {
    margin-right: auto;
    margin-left: auto;
  }
}
    <!DOCTYPE html>
<html lang="en">
    <head>
      <title>Portland Historical Tours</title>
      <meta charset="utf-8">
      <meta content="width=device-width, initial-scale=1.0" name="viewport">
      <link href="styles/historical_tours_styles.css" rel="stylesheet">
      <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    </head>
    <body id="wrapper">
      <header>
        <h1>Portland Historical Tours</h1>
      </header>
      <nav>
        <a href="project/template.html">Home</a> &nbsp;
        <a href="project/tours.html">Tours</a> &nbsp;
        <a href="project/about.html">About Us</a> &nbsp;
        <a href="project/contact.html">Contact</a>
      </nav>
      <main>
        <img alt="Portland, Oregon" height="460" id="portlandimage"
            src="site_assets/portland_historical_tours.jpg" style="float: right;" width="620">
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit
        purus risus, mattis efficitur augue suscipit ut. Etiam lobortis auctor
        felis, a dignissim erat iaculis eu. Praesent et elit eu lectus lacinia
        posuere id in nisl. Aenean faucibus, massa eget eleifend rutrum, lectus
        diam ullamcorper mauris, vitae semper ligula dui et mauris. Nullam
        vulputate sem tincidunt elementum molestie. Fusce dignissim tristique
        rutrum. Proin gravida mi quam. Nam non eros a mauris aliquam blandit sit
        amet sed magna. Fusce auctor leo diam, eu pellentesque orci auctor id.
        Mauris tempor nulla ligula, sed rutrum tortor dictum sed. Morbi mollis
        cursus ipsum eget mattis.</p>
        <h2>Dolor Sit Amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit
        purus risus, mattis efficitur augue suscipit ut. Etiam lobortis auctor
        felis, a dignissim erat iaculis eu. Praesent et elit eu lectus lacinia
        posuere id in nisl. Aenean faucibus, massa eget eleifend rutrum, lectus
        diam ullamcorper mauris, vitae semper ligula dui et mauris. Nullam
        vulputate sem tincidunt elementum molestie. Fusce dignissim tristique
        rutrum. Proin gravida mi quam. Nam non eros a mauris aliquam blandit sit
        amet sed magna. Fusce auctor leo diam, eu pellentesque orci auctor id.
        Mauris tempor nulla ligula, sed rutrum tortor dictum sed. Morbi mollis
        cursus ipsum eget mattis.</p>
      </main><br>
      <br>
      <footer>
        Copyright &copy; 2017 Portland Historical Tours<br>
        <a href="mailto:sales@portlandhistoricaltours.com">sales@portlandhistoricaltours.com</a>
      </footer>
    </body>
</html>

最佳答案

问题出在屏幕分辨率为 1024px 的 media query 中，与您使用 media query 隐藏 display 的方式相同小屏幕分辨率 中的图像 div，使用相同的方法可以在 media query 中进行如此多的更改。使用 clear:both 在标签 main 中的菜单后正确对齐文本。

clear - The clear property specifies on which sides of an element floating elements are not allowed to float.

@media only screen and (max-width: 1024px) {
body {margin: 0; padding: 0; background-image: none;}
h1 {margin: 0;}
nav {float: none; width: auto; padding: 0.5em;}
nav a {padding: 1em;}
main {padding: 1em; margin-left: 0; font-size: 90%; clear:both;}
footer {margin: 0;}
#wrapper {width: auto; min-width: 0; margin: 0; box-shadow: none;}
}

检查这个jsFiddle .

关于html - 如何仅在移动设备上清除 float ？当我删除平板电脑的媒体查询时，为什么我的移动媒体查询会受到影响？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44110752/

25 4 0
文章推荐： c++ - QAbstractTableModel::data 方法调用次数过多
文章推荐： html - SCSS - 嵌套的 css 类导致不同的大小(宽度和高度)
文章推荐： javascript - 如何为同一 div 中存在的两种形式切换显示和隐藏？
文章推荐： javascript - 单击时突出显示表格行 - 不突出显示第一行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com