内容不在标题下方

时间：2017-06-12 14:05:12

标签： html css

我正在尝试在我的标题下面放置一个包含我的主要内容的div但是由于某种原因，我的标识图像会使div显示向右移动。我不是HTML / CSS的专家，我觉得因为无法解决这个问题而感到愚蠢。

这是我所看到的截图（用鲜花代替的图像）

image

代码：

body {
  background-color: #fff;
  color: #777;
  font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

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

a:hover {
  color: #C0C0C0;
}

h2 {
  color: #444;
  font-size: 50px;
  text-align: right;
  line-height: 90%;
}

p {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  color: black;
  font-size: 11px;
  padding-bottom: 15px;
}

.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 960px;
}


/* Header */

header {
  height: 120px;
  padding-bottom: 15px;
}

header h1 {
  float: left;
  margin-top: 32px;
}

header nav {
  float: right;
}

header nav ul li {
  float: left;
  display: inline-block;
  margin-top: 70px;
}

header nav ul li a {
  color: #444;
  text-transform: uppercase;
  display: block;
  font-weight: lighter;
  letter-spacing: 2px;
  margin-right: 25px;
}


/* About */

#about {
  padding-top: 1px;
  height: 500px;
  margin-top: 1px;
  position: relative;
}
<body>
  <header>
    <div class="wrapper">
      <h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div id="about">
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></div>
  </div>
</body>

如果我将徽标设置为标题的背景似乎有效，但这会大大降低其质量，我希望稍后将我的徽标转换为链接。我在这里搜索了很多答案，但似乎没有任何工作。非常感谢任何帮助。

3 个答案:

答案 0 :(得分：0)

当您使用浮动来定位元素时，您需要清除这些浮动，以便内容显示在您想要的位置。在下面我添加了一个明确的关于div作为一个简单的演示：

＆＃13;
＆＃13; 
body {
  background-color: #fff;
  color: #777;
  font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

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

a:hover {
  color: #C0C0C0;
}

h2 {
  color: #444;
  font-size: 50px;
  text-align: right;
  line-height: 90%;
}

p {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  color: black;
  font-size: 11px;
  padding-bottom: 15px;
}

.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 960px;
}


/* Header */

header {
  height: 120px;
  padding-bottom: 15px;
}

header h1 {
  float: left;
  margin-top: 32px;
}

header nav {
  float: right;
}

header nav ul li {
  float: left;
  display: inline-block;
  margin-top: 70px;
}

header nav ul li a {
  color: #444;
  text-transform: uppercase;
  display: block;
  font-weight: lighter;
  letter-spacing: 2px;
  margin-right: 25px;
}


/* About */

#about {
  clear:both;
  padding-top: 1px;
  height: 500px;
  margin-top: 1px;
  position: relative;
}
＆＃13; 
<body>
  <header>
    <div class="wrapper">
      <h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div id="about">
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

有许多方法可以清除浮动 - 这里有一些关于清除浮动的有用链接：

我建议您使用css3继续使用浮点数，现在有更好的布局方式 - 例如使用display:flex

答案 1 :(得分：0)

您需要清除<header>中的浮动元素，以便页面正文不会＆＃34;阻止＆＃34; 。您可以使用所谓的 clearfix 来解决此问题。

＆＃13;
＆＃13; 
body {
  background-color: #fff;
  color: #777;
  font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

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

a:hover {
  color: #C0C0C0;
}

h2 {
  color: #444;
  font-size: 50px;
  text-align: right;
  line-height: 90%;
}

p {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  color: black;
  font-size: 11px;
  padding-bottom: 15px;
}

/* Header */

header {
  margin: 0 auto;
  padding: 0 10px;
  width: 960px;
  height: 120px;
  padding-bottom: 15px;
}

header h1 {
  float: left;
  margin-top: 32px;
}

header nav {
  float: right;
}

header nav ul li {
  float: left;
  display: inline-block;
  margin-top: 70px;
}

header nav ul li a {
  color: #444;
  text-transform: uppercase;
  display: block;
  font-weight: lighter;
  letter-spacing: 2px;
  margin-right: 25px;
}


/* About */

#about {
  padding-top: 1px;
  height: 500px;
  margin-top: 1px;
  position: relative;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
＆＃13; 
<header>
  <h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
  </header>

<main class="cf" id="about">
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></main>
＆＃13;
＆＃13;
＆＃13;

如果这是一个新网站，我建议使用flexbox而不是浮点数。

  • align-items: center;将垂直居中<header>内的元素。
  • justify-content: space-between;会将<h1>推向左侧，将<nav>推向右侧。

＆＃13;
＆＃13; 
body {
  background-color: #fff;
  color: #777;
  font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

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

a:hover {
  color: #C0C0C0;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding-bottom: 15px;
  width: 960px;
}

header ul {
  display: flex;
}

header ul,
header li {
  margin: 0;
  padding: 0;
  list-style: none;
}

header nav a {
  color: #444;
  text-transform: uppercase;
  display: block;
  font-weight: lighter;
  letter-spacing: 2px;
  margin-right: 25px;
}
＆＃13; 
<header>
  <h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
  </header>

<main class="cf" id="about">
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></main>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

清理CSS并定位导航项目。 我删除了花车因为我认为应该尽可能避免它们。浮动不遵循自然文档流程。

body {
  background-color: #fff;
  color: #777;
  font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

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

a:hover {
  color: #C0C0C0;
}

.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.wrapper ul {
margin-left: auto;
}

.wrapper ul li {
display: inline-block;
list-style: none;
min-width: 70px;
}

/* Header */

header {
  height: 120px;
  width: 960px;
  padding-bottom: 15px;
}

header ul li a {
  text-transform: uppercase;
  display: block;
  font-weight: lighter;
  letter-spacing: 2px;
  margin-right: 25px;
}


/* About */

#about {
  padding: 1px 0 0 10px;
  height: 500px;
  margin-top: 1px;
  position: relative;
}
<header>
  <div class="wrapper">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="100" vspace="20">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</header>

<div id="about">
  <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></div>
</div>

相关问题
最新问题