Question

我是HTML5和CSS3编码的新手，我正试图让社交媒体图标保持在其标题容器中。一旦我向右浮动，它就会向我想要的右侧移动，但不会停留在标题元素内。

/************************************
General: Body
************************************/

@charset "utf-8";
 body {
  width: 100%;
}

header, main, section, article,
footer {
    display: block;
}

html, body, header, nav, main,
section, article, aside, footer,
h1, h2, h3, p, a {
    margin: 0;
    padding: 0;
}

/************************************
Fonts
************************************/

h1 {
    font-family: 'Coming Soon', cursive;
    color: #FFFFFF;
}

h2 {
    font-family: 'Oswald', sans-serif;
    color: #44414E;
}

h3 {
    font-family: 'Oswald', sans-serif;
    color: #44414E;
}

p {
    font-family: 'Lato', sans-serif;
    color: #44414E;
}
/************************************
Page Wrapper 
************************************/

#pageWrapper {
  width: 85%;
  margin: 0 auto;
}
/************************************
Header
************************************/

header {
  background: #B6C3B8;
  width: 85%;
  margin: 0 auto;
  padding: 10px 10px;
}

#header_name {
  display: block;
  float: left;
}

#social_icons_1 {
  display: block;
  float: right;
}
/************************************
Main
*************************************/

main {
  width: 85%;
  margin: 0 auto;
}

.button {
  border: 3px solid #0c222e;
  background: #3e779d;
  background: -webkit-gradient(linear, left top, left bottom,   from(#b6ccdb), to(#3e779d));
  background: -webkit-linear-gradient(top, #b6ccdb, #3e779d);
  background: -moz-linear-gradient(top, #b6ccdb, #3e779d);
  background: -ms-linear-gradient(top, #b6ccdb, #3e779d);
  background: -o-linear-gradient(top, #b6ccdb, #3e779d);
  background-image: -ms-linear-gradient(top, #b6ccdb 0%, #3e779d 100%);
  padding: 13px 26px;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  border-radius: 17px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  text-shadow: #7ea4bd 0 1px 0;
  color: #000305;
  font-size: 19px;
  font-family: helvetica, serif;
  text-decoration: none;
  vertical-align: middle;
}
.button:hover {
  border: 3px solid #0a3c59;
  text-shadow: #1e4158 0 1px 0;
  background: #bacbd6;
  background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#bacbd6));
  background: -webkit-linear-gradient(top, #65a9d7, #bacbd6);
  background: -moz-linear-gradient(top, #65a9d7, #bacbd6);
  background: -ms-linear-gradient(top, #65a9d7, #bacbd6);
  background: -o-linear-gradient(top, #65a9d7, #bacbd6);
  background-image: -ms-linear-gradient(top, #65a9d7 0%, #bacbd6 100%);
  color: #fff;
}
.button:active {
  text-shadow: #1e4158 0 1px 0;
  border: 3px solid #0a3c59;
  background: #65a9d7;
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#bacbd6));
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
  background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
  color: #ffffff;
}
/************************************
Mid Content
*************************************/

/************************************
Lower Content
*************************************/

/************************************
footer
*************************************/

footer {
  background: #B6C3B8;
  width: 85%;
  margin: 0 auto;
  padding: 10px 10px;
}
#footer p {
  color: #FFFFFF;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <title>Example Webpage</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="">
  <link rel="stylesheet" type="text/css" href="styles/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Coming+Soon|Lato|Oswald' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>

<body>
  <div id="pageWrapper">

    <header>
      <h1 class="header_name">Example Webpage</h1>
      <div id="social_icons_1">
        <a href="#">
          <img src="image/facebook-icon.png" alt="Facebook Logo">
        </a>
        <a href="#">
          <img src="image/twitter-icon.png" alt="Twitter Logo">
        </a>
        <a href="#">
          <img src="image/rss-icon.png" alt="RSS Feed Logo">
        </a>
      </div>
    </header>
    <!-- End Header -->

    <main>

      <section id="presentational_content">
        <article>
          <h2>Welcome to my Portfolio</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet purus blandit, interdum lorem vitae, maximus nisl. Suspendisse posuere sem est, vitae varius sapien sollicitudin sagittis.</p>
          <a href='#' class='button'>Veiw My Portfolio</a>
        </article>
        <img src="image/image_placeholder.png" alt="Image Placeholder">
      </section>
      <!-- End Presentational Content Section-->

      <section id="main_content">
        <article>
          <h3>About</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed dolor dictum, varius neque id, efficitur magna. Vivamus scelerisque nisl a nulla euismod tincidunt. Etiam facilisis vehicula ipsum. Cras interdum vestibulum velit, at imperdiet
            justo mattis at. Etiam sed diam et magna venenatis venenatis sit amet quis massa. Integer ac mi eu risus condimentum interdum vel id ex. Vestibulum tempor pulvinar ante, at condimentum nunc ornare et.</p>
        </article>
        <article>
          <h3>Services</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed dolor dictum, varius neque id, efficitur magna. Vivamus scelerisque nisl a nulla euismod tincidunt. Etiam facilisis vehicula ipsum. Cras interdum vestibulum velit, at imperdiet
            justo mattis at. Etiam sed diam et magna venenatis venenatis sit amet quis massa. Integer ac mi eu risus condimentum interdum vel id ex. Vestibulum tempor pulvinar ante, at condimentum nunc ornare et.</p>
        </article>
        <article>
          <h3>Contact</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed dolor dictum, varius neque id, efficitur magna. Vivamus scelerisque nisl a nulla euismod tincidunt. Etiam facilisis vehicula ipsum. Cras interdum vestibulum velit, at imperdiet
            justo mattis at. Etiam sed diam et magna venenatis venenatis sit amet quis massa. Integer ac mi eu risus condimentum interdum vel id ex. Vestibulum tempor pulvinar ante, at condimentum nunc ornare et.</p>
        </article>
      </section>
      <!-- End Main Content Section-->

      <section id="additional_content">
        <table width="50%" border="0" cellingpadding="5">
          <tr>
            <td align="center" valign="center">
              <a href="#">
                <img src="image/image_placeholder_2.png">
              </a>
            </td>
            <td align="center" valign="center">
              <a href="#">
                <img src="image/image_placeholder_2.png">
              </a>
            </td>
          </tr>
          <tr>
            <td align="center" valign="center">
              <a href="#">
                <img src="image/image_placeholder_2.png">
              </a>
            </td>
            <td align="center" valign="center">
              <a href="#">
                <img src="image/image_placeholder_2.png">
              </a>
            </td>
          </tr>
        </table>
      </section>
      <!-- End Additional Content Section-->

    </main>
    <!-- End Main -->

    <footer>

      <p class="copy">&copy;Example Webpage 2015. All Rights Reserved.</p>
      <div id="social_icons_2">
        <a href="#">
          <img src="image/facebook-icon.png" alt="Facebook Logo">
        </a>
        <a href="#">
          <img src="image/twitter-icon.png" alt="Twitter Logo">
        </a>
        <a href="#">
          <img src="image/rss-icon.png" alt="RSS Feed Logo">
        </a>
      </div>

    </footer>
    <!-- End Footer -->

  </div>
  <!-- End of pageWrapper -->

</body>

</html>

Answer 1

您需要使用clearfix

clearfix是元素自动清除其子元素的一种方式元素，因此您不需要添加额外的标记。它＆＃39; S 通常用于浮动布局，其中元素浮动水平堆放。 clearfix是一种对抗浮动元素zero-height container problem的方法

Source

有关`clearfix` here

的更多信息

有关`floats` here

的更多信息

请参阅下面的代码段：

＆＃13;

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
/************************************
Header
************************************/

header {
  background: #B6C3B8;
  width: 85%;
  margin: 0 auto;
  padding: 10px 10px;
}
.header_name {
  display: block;
  float: left;
}
#social_icons_1 {
  display: block;
  float: right;
}

＆＃13;

<header class="clearfix">
  <h1 class="header_name">Example Webpage</h1>

  <div id="social_icons_1">
    <a href="#">
      <img src="image/facebook-icon.png" alt="Facebook Logo">
    </a>
    <a href="#">
      <img src="image/twitter-icon.png" alt="Twitter Logo">
    </a>
    <a href="#">
      <img src="image/rss-icon.png" alt="RSS Feed Logo">
    </a>

  </div>
</header>
<!-- End Header -->

＆＃13;

P.S。正如@Ivan Ivanov所说，当你在HTML上标记为h1时，你试图将ID设为class

Answer 2

将“标题”标记的顶部和底部边框的填充增加到＆gt; = 16px，即

header {
  background: #B6C3B8;
  width: 85%;
  margin: 0 auto;
  padding: 20px 10px;
}

这会在“标题”标记中显示社交图标徽标。

在这种情况下，如果通过右键单击页面并单击“检查元素”来检查元素，它会提供很多帮助。这使您可以“动态”调整样式的值，并立即查看这些变化的结果。

Answer 3

我注意到你的CSS中有错误。在HTML中，您使用<h1>标记的类，但您尝试将其设置为CSS中的ID。 HTML：

<h1 class="header_name">Example Webpage</h1>

CSS：

#header_name {
    display: block;
    float: left;
}

所以看起来应该是这样的：

.header_name {
    display: block;
    float: left;
}

修复完毕后，您应该清除标题中的元素，如上一个答案中所述，或者只使用其中一个。选项1：

header:after { content: ''; display: table; clear: both; }

选项2：

header { overflow: hidden; }

第二种变体可以使用，但不推荐使用，因为overflow: hidden会隐藏所有内容，如果你有一个下拉菜单，它们将无法显示。所以只需使用第一个。

P.S。只是一个建议 - 最好使用类来代替样式而不是ID。这样，如果你在不同的地方有类似的元素，你将避免重复代码。

浮动元素不在其容器内

3 个答案:

有关`clearfix` here

有关`floats` here

浮动元素不在其容器内

3 个答案:

有关clearfix here

有关floats here

有关`clearfix` here

有关`floats` here