我在这里创建了一支笔 → https://codepen.io/codeispoetry/pen/NpKZpN但我面临两个挑战 →
1 → 您可以看到右侧的内容与页脚重叠。我尝试将 height:auto 设置为许多元素，但仍然无法解决问题。 enter image description here
2 → 我希望我的菜单项恰好位于顶行的中间。
代码在这里 →
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta charset="utf-8"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Responsive Two Column Layout (Left Column Fluid)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="max-width">
<header>
<div class="logo floating-inline">
<img src="https://s3.amazonaws.com/projectsts/generic/logo2.png" alt="">
</div><!-- logo -->
<nav class="floating-inline">
<ul class="nav inline-items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">World</a></li>
</ul>
</nav>
</header>
<div class="post-title">
<h1>Responsive Two Column Layout Left Column → Fluid, Right Column → Adaptive.</h1>
</div> <!-- post-title -->
<div class="site-container">
<main class="left-column">
<h2>Left Column (fluid)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</main>
<aside class="right-column">
<h2>Right Column</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</aside>
</div>
<footer>
<p><a href="#">Contact Us</a> | <a href="#">FAQ</a> | <a href="#">Privacy Policy</a></p>
<p>©2017 Copyright Text Here</p>
</footer>
</div>
</body>
</html>
CSS 在这里 →
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { margin: 0; }
.max-width {max-width: 1400px; margin: 0 auto;}
.site-container, .post-title, footer, header { position: relative; margin: .5em; }
.left-column, .right-column,.post-title, footer, header { border: 1px solid #ccc; padding: 1.25em; }
.left-column { margin-bottom: .5em; }
.floating-inline{display: inline-block;vertical-align: middle;}
.nav {
list-style: none;
margin-left: 0;
margin-bottom: 0;
padding-left: 0;
}
.nav > li,
.nav > li > a {
display: inline-block;
*display: inline;
zoom: 1;
text-decoration: none;
}
.inline-items {
margin-top: 0;
}
.inline-items li {
margin-left: 0;
border-left: 1px solid black;
padding-left: 10px;
padding-right: 10px;
}
.inline-items li:first-child {
margin-left: 0;
border: none;
padding-left: 0;
padding-right: 10px;
}
.inline-items li:last-child {
padding-right: 0;
}
/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {
.left-column { margin-right: 19.5em; }
.right-column { position: absolute; top: 0; right: 0; width: 18.75em; }
}
请指导我哪里出错了。
最佳答案
第一个问题的解决方案
https://codepen.io/obedparla/pen/xqxBXW
基本上，问题在于您使 div 彼此“ float ”的方式。您正在使用绝对定位强制他们留在原地。绝对定位元素不考虑其他元素的框或空间，它们位于所有元素之上。
.clear{
clear: both;
}
.left-column{
width: 70%;
float: left;
margin: 0;
}
.right-column{
width: 28%;
float: right;
}
最后，我在您的 CSS 中添加了以下内容，以覆盖您当前的 CSS。它将元素设置为 float ，并纠正宽度，产生相同的效果但没有你的问题。这是正确的做法。您还可以检查 flex-box。
你还需要
<div class="clear"></div>
在 float 元素和页脚之间，清理 float (否则它们会重叠在页脚上)。
第二个问题的解决方案
由于您使用行内 block 来对齐 Logo 和文本，因此您需要设置每个元素的宽度。
工作笔在这里:https://codepen.io/obedparla/pen/xqxBXW
我唯一添加的是:
nav.floating-inline{
width: 70%;
}
ul.nav.inline-items{
text-align: center;
}
通过为 float 内联元素(导航)指定宽度，您可以使用文本对齐居中，它们将在这 70% 宽度之间居中。
您可以尝试使用它来获得您想要的确切结果。给 Logo 更大的宽度等等。
对于第一期，内容没有与您的代码笔的页脚重叠。如果还是这样，能否提交截图？
关于html - 菜单未居中对齐且旁边重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42435526/