Question

我在这里创建了一支笔→https://codepen.io/codeispoetry/pen/NpKZpN，但我面临着两个挑战→

1→您可以看到右侧的内容与页脚重叠。我尝试设置高度：自动设置为多个元素，但仍无法解决问题。enter image description here

2→我希望我的菜单项应该恰好位于该顶行的中间。 Centred Menu Items

代码在这里→

 <!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>&copy;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; }
}

请指导我出错的地方。

Answer 1

第一个问题的解决方案

https://codepen.io/obedparla/pen/xqxBXW

基本上问题是你让div“彼此相邻”浮动的方式。您通过使用绝对定位强制使它们保持原位。 Absoulute定位元素不尊重其他元素的框或空格，它们位于所有元素之上。

.clear{
  clear: both;
}
.left-column{
  width: 70%;
  float: left;
  margin: 0;
}

.right-column{
  width: 28%;
  float: right;
}

我最后在你的css中添加了以下内容，以覆盖你当前的css。它将元素设置为浮动，并校正宽度，从而产生相同的效果但没有问题。这是正确的做法。你也可以检查flex-box。

您还需要

<div class="clear"></div>

浮动元素和页脚之间的

，以清理浮动（否则它们将在页脚上重叠）。

第二个问题的解决方案

由于您使用内联块来对齐徽标和文本，因此您需要设置每个元素的宽度。

工作笔在这里：https://codepen.io/obedparla/pen/xqxBXW

我添加的唯一内容是：

nav.floating-inline{
 width: 70%;
}

ul.nav.inline-items{
  text-align: center;
}

通过为浮动内联元素（导航）指定宽度，您可以使用文本对齐中心，它们将在70％宽度之间居中。

你可以玩这个来达到你想要的确切结果。为徽标提供更大的宽度等。

对于第一个问题，内容不会覆盖您的codepen的页脚。如果仍然如此，你能提交截图吗？

Answer 2

<nav class="floating-inline" style="width: 80%;text-align: center;">

我希望这会有所帮助：）

Answer 3

header{
    height:100px;
}
nav{
    float:left;
    width:50%;
    margin:20px auto;
}
.logo{
    float: left;
    width: 40%;
}

菜单未在中心对齐而在旁边重叠

3 个答案: