CSS - 重新调整大小时未正确浮动的标头元素

Question

我目前正在向网站添加所有媒体查询，并且当我将480px调整到移动范围以下时，我会遇到一些拒绝正常浮动的标头元素。我想让我的Logo在页面上伸展，所有其他元素都在彼此之上浮动。目前，电话/电子邮件并排，社交媒体图标卡在左侧，不会在页面内嵌显示。我已尝试过display规则的所有变体，但它们不会让步。

body {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}

body {
  margin: 0 auto 0 auto;
}

.container {
  margin: auto;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

header {
  background: #ffffff;
  height: 100px;
  top: 0;
  z-index: 10;
}

.left-header {
  background: white;
  width: 50%;
  float: left;
  height: 100px;
}

.right-header {
  background: white;
  width: 50%;
  float: right;
  height: 50px;
}

.right-header-top {
  background: white;
  float: right;
  width: 100%;
  height: 100%;
  margin-right: 100px;
}

.right-header-bottom {
  background: white;
  float: left;
  width: 100%;
  height: 100%;
}

#logo {
  margin-left: 60px;
  margin-top: 50px;
}

nav {
  float: left;
  font-weight: 400;
}

nav a {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
  margin-right: 25px;
  font-size: 12px;
}

div#contact {
  float: right;
  margin-right: 20px;
}

div#contact img {
  display: inline-block;
  border: 10px;
  margin: 20px;
  width: 30px;
  height: 30px;
}

div#contact p {
  display: inline-block;
  margin-top: 25px;
  font-size: 10px;
}

.right-header-bottom i {
  height: 10px;
  width: 10px;
  border: 15px;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  margin-left: 10px;
}

a {
  color: #000000;
  text-decoration: none;
}

a:hover {
  color: #000000;
}

@media screen and (max-width: 1000px) {
  div.container {
    float: none;
    margin: 0 20px 0 20px;
  }
  div.column {
    float: none;
  }
}

@media screen and (max-width: 480px) {
  header {
    float: none;
    height: auto;
  }
  nav {
    float: none;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
  }
  nav a {
    display: block;
  }
  .right-header {
    height: auto;
    width: auto;
  }
  .right-header-top {
    float: none;
  }
  .right-header-bottom {
    float: none;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<header>
  <div class="left-header">
    <img src="http://localhost:8888/wp-content/uploads/2017/07/Logo.png" alt="logo" id="logo" style="width:250px;height:30px;">
  </div>
  <div class="right-header">
    <div class="right-header-top">
      <div id="contact">
        <img src="http://localhost:8888/wp-content/uploads/2017/07/phone.png">
        <p>0113 220 5265</p>
        <img src="http://localhost:8888/wp-content/uploads/2017/07/email.png">
        <p>hello@featuremedia.co.uk</p>
      </div>
    </div>
    <div class="right-header-bottom">
      <nav>
        <a href="index.html">HOME</a>
        <a href="portfolio.html">PORTFOLIO</a>
        <a href="business.html">PRODUCTS</a>
        <a href="about.html">ABOUT</a>
        <a href="contact.html">CONTACT</a>
        <a href="blog.html">BLOG</a>
      </nav>

      <i class="fa fa-facebook" aria-hidden="true"></i>
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <i class="fa fa-youtube-play" aria-hidden="true"></i>
      <i class="fa fa-linkedin" aria-hidden="true"></i>
    </div>
  </div>
</header>

以下是它的外观 -

Answer 1

你有很多block要杀人。

要显示的一些内容body { font-family: "Merriweather Sans", sans-serif; font-size: 16px; line-height: 1.5; color: #333333; } body { margin: 0 auto 0 auto; } .container { margin: auto; max-width: 100%; padding-left: 10px; padding-right: 10px; } header { background: #ffffff; height: 100px; top: 0; z-index: 10; } .left-header { background:white; width:50%; float:left; height: 100px; } .right-header { background:white; width:50%; float:right; height: 50px; } .right-header-top { background: white; float: right; width: 100%; height: 100%; margin-right: 100px; } .right-header-bottom { background: white; float: left; width: 100%; height: 100%; } #logo { margin-left: 60px; margin-top: 50px; } nav { float: left; font-weight: 400; } nav a { color: #000000; text-decoration: none; display: inline-block; margin-top: 15px; margin-right: 25px; font-size: 12px; } div#contact { float: right; margin-right: 20px; } div#contact img { display: inline-block; border: 10px; margin: 20px; width: 30px; height: 30px; } div#contact p { display: inline-block; margin-top: 25px; font-size: 10px; } .right-header-bottom i { height: 10px; width: 10px; border: 15px; float: left; margin-top: 15px; margin-right: 10px; margin-left: 10px; } a { color: #000000; text-decoration: none; } a:hover { color: #000000; } @media screen and (max-width: 1000px) { div.container { float: none; margin: 0 20px 0 20px; } div.column { float: none; } } @media screen and (max-width: 480px) { header { float: none; height: auto; } nav { float: none; text-align: center; padding-bottom: 10px; padding-top: 10px; } nav a { display: block; } .right-header { height: auto; width: auto; } .right-header-top { float: none; } .right-header-bottom { float: none; } } /* Added Styles */ .left-header { display: block; float: none; width: 100%; height: auto; } img#logo { min-width: 100%; margin: auto; height: auto !important; } .right-header { display: block; float: none; width: 100%; height: auto; } div[class*="header"] { display: block; float: none; width: 100%; height: auto; text-align: center; } div#contact { float: none; display: block; width: 100%; margin: auto; text-align: center; } header { height: auto; } body { max-width: 500px; border: 1px dashed #ccc; min-height: 400px; } nav { float: none; width: 100%; text-align: center; } .right-header-bottom i { float: none; } /* Centered Nav, Email & Phone */ h1 { text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ddd; margin-bottom: 0px; margin-top: 100px; } h1 { text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ddd; margin-bottom: 0px; margin-top: 100px; } div#contact > div img { margin: auto; } div#contact > div p { margin: auto 10px; line-height: 3em; vertical-align: top; } div#contact > div:first-of-type { margin-bottom: 10px; } nav.block a { display: block; margin: 10px auto; }和一些要对齐的文字输入。

<head>
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

		
</head>

<body>
		
<header>
        <div class="left-header">
            <img src="https://placehold.it/500x100" alt="logo" id="logo" style="width:250px;height:30px;">
        </div>
    <div class="right-header">
         <div class="right-header-top">
            <div id="contact">
                <img src="https://placehold.it/50x50">
                <p>0113 220 5265</p>
                <img src="https://placehold.it/50x50">
                <p>hello@featuremedia.co.uk</p>
            </div>    
         </div>
         <div class="right-header-bottom">
            <nav>
                <a href="index.html">HOME</a>
                <a href="portfolio.html">PORTFOLIO</a>
                <a href="business.html">PRODUCTS</a>
                <a href="about.html">ABOUT</a>
                <a href="contact.html">CONTACT</a>
                <a href="blog.html">BLOG</a>


            </nav>

                <i class="fa fa-facebook" aria-hidden="true"></i>
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <i class="fa fa-youtube-play" aria-hidden="true"></i>
                <i class="fa fa-linkedin" aria-hidden="true"></i>
         </div>
    </div>
	</header>
  
</body>

<h1>Center Nav, Email & Phone</h1>

<head>
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

		
</head>

<body>
		
<header>
        <div class="left-header">
            <img src="https://placehold.it/500x100" alt="logo" id="logo">
        </div>
    <div class="right-header">
         <div class="right-header-top">
            <div id="contact">
                <div>
                  <img src="https://placehold.it/50x50">
                  <p>0113 220 5265</p>
                </div>
                <div>
                  <img src="https://placehold.it/50x50">
                  <p>hello@featuremedia.co.uk</p>
                </div>
            </div>    
         </div>
         <div class="right-header-bottom">
            <nav class="block">
                <a href="index.html">HOME</a>
                <a href="portfolio.html">PORTFOLIO</a>
                <a href="business.html">PRODUCTS</a>
                <a href="about.html">ABOUT</a>
                <a href="contact.html">CONTACT</a>
                <a href="blog.html">BLOG</a>


            </nav>

                <i class="fa fa-facebook" aria-hidden="true"></i>
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <i class="fa fa-youtube-play" aria-hidden="true"></i>
                <i class="fa fa-linkedin" aria-hidden="true"></i>
         </div>
    </div>
	</header>
  
</body>

{{1}}

Answer 2

取消float: right上的div#contact并将display: inline-block更改为display: block上的nav a

-OR -

将此CSS用于导航：

nav {
  display: flex;
  flex-direction: column;
}

nav a {
  align-self: center;
}

你仍然要杀掉标题上的浮动。

这是我在我的书签中保存的有用小提琴，用于flexbox参考。它显示了flexbox可以做的所有事情并使其相对容易理解： https://codepen.io/enxaneta/full/adLPwv