Question

在我的代码中，我使用h标签来显示我想要显示的不同文本。但出于某种原因，我的h5和h6标签不能垂直对齐到左边。它看起来像标题中的文字正在做些什么

HTML

<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>

<body>


    <div id="header">
        <a href="index.html"><div id="leftHeader">
        <img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
        <h1>Amanda Farrington</h1>
    </div>
        <div id="nav">

      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="index.html/#workJump">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="notes.html">Notes</a></li>
      </ul>
        </div>
    </div>



    <div id="hero2">
        <h6>Project Type</h6>
        <h5>Project Title</h5>
    </div>


    <div id="workImage">
        <img src="assets/trees.jpg" alt="Logo" style="width:100%;height:100%">
    </div>

    <div id="workInfo">
        <p>BOUT MY PROJECTS<p>
    </div>
</body>
</html>

CSS

/*----------header styles-------------*/
#header {
  color: #D7DADB;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size : 15px;
  text-align: left;
  width: 100%;
  padding-left: 3em;
  position: relative;
  height: 15%;
  box-sizing: border-box;
  padding-top: 1em;

}


#header img
{
    float: left;
    padding-left: 3em;
}

h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}

#nav {
  width: 50%;
  margin:0;
  padding:0;
  text-align: right;
  color: red;
  font-size:20px;
  float: right;
  padding-right: 2em;

}

#nav ul {
  padding: 1px;
}

#nav li {
  display: inline;
  padding: 38px;
}

#nav li a {
  color: #2C3E50;
  text-decoration: none;
}

#nav li a:hover {
  color: #45CCCC;
}

    /*----------work page styles-------------*/
#hero2{
    width: 100%;
    height: 10em;
    position: relative;
    background: red;
    top: 5em;
}

#workImage
{
    top: 9%;
    width: 80%;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    position: static;

}

#workInfo{

    width: 70%;
    height: 50em;
    margin-left: auto;
    margin-right: auto;

}

p{
        font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 25px;
      color: #2C3E50;
    float: left;
}
h5{

    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 40px;
      color: #2C3E50;
    float: left;
    display: inline-block;
    vertical-align: middle;

}

h6{

    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #45CCCC;
    float: left;

}

Answer 1

您的父容器正在折叠，因为您已将float:left;应用于<p>，<h5>和<h6>标记。浮动从文档流中取出项目。因此，当您将所有元素浮动到div时，div将会崩溃，因为它不会认为div中有任何内容。要强制div尊重其中的浮动元素，您需要将clearfix类应用于#hero2。这会将英雄下方的图像和文字向下推。

clearfix CSS

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after { clear: both; }

要更好地理解 clearfix ，请阅读this SO thread: "Which method of clearfix is best?"

为什么我的h标签不会垂直对齐？

1 个答案: