CSS - 重新调整大小时未正确浮动的标头元素
我目前正在向网站添加所有媒体查询，并且当我将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>
以下是它的外观 -
2 个答案:
答案 0 :(得分：2)
你有很多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}}
答案 1 :(得分：0)
取消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
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？