Question

我有以下HTML：

<!DOCTYPE html>
<head>
  <title></title>
  {% load staticfiles %}
  <link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'portfolio/animate.css' %}" />
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/drilldown.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bodyback">
  <div class="col-md-12" align="center" style="height:100%">
    <a href="{% url 'home' %}">
      <img style="margin-top: 20px;" 
           class="h-logo animated fadeInDown" src="{% static 'portfolio/img/hero.png' %}" 
           width="180" height="180" alt="">
    </a>
    <br>
    <section id="hi">
      <div class="container animated fadeInUp" align="center">
        <h2 style="color:#45b29a;" align="center">Hi.</h2>
        <p class="p_class" align="center">I'm Gentle Joseph, <br>a 24 year old web designer/developer from Singapore.<br> I have a passion for web design and love to create for web and mobile devices.</p>
      </div>
    </section>
    <button class="btn btn-xs"></button>
    <button class="btn btn-xs"></button>
    <button class="btn btn-xs"></button>
    <br><br><br><br><br><br><br><br>
    <section>
      <div>
        <h1 style="color:#45b29a;" align="center">What I can do.</h1>
        <br><br>
        <table>
          <tr>
            <td align="right" width="50%">
              <img
                   class="h-logo animated fadeIn" 
                   src="{% static 'portfolio/img/design.gif' %}" 
                   width="200" height="200" alt=""></a>
          </td>
        <td align="center" width="50%"><h3>Design what you want.</h3><br>
          <p class="p_class"> I like to keep it simple. My goals are to focus on<br> typography, content and conveying the message that you want to send.</p>
        </td>
        </tr>
      <tr>
        <td align="center" width="50%"><h3>Develop what you need.</h3><br>
          <p class="p_class"> I'm a developer, so I know how to create your<br> website to run across devices using the latest<br> technologies available.</p>
        </td>
        <td align="left" width="50%">
          <img
               class="h-logo animated fadeIn" 
               src="{% static 'portfolio/img/develop.gif' %}" 
               width="100" height="100" alt=""></a>
      </td>
    </tr>
  </table>
</div>
</section>
<br><br><br><br><br>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
</div><br>
</body>
<div align="center" class="more_about">
  <a href="{% url 'academics' %}">&nbsp;&nbsp;Read more about gentle
    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
<footer>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <div class="col-md-12" align="right" style="margin-top: 6px;">
    <ul class="social-network social-circle">
      <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
    </ul>
  </div>
</footer>
</html>

我的CSS：

.more_about {
    background-color: red;

}

请忽略我在HTML中提到的所有类，因为我的CSS没有这些类。但我不知道为什么当我加载页面而不是我提到我的课程的div时，整个页面得到背景红色。知道为什么男人们？提前谢谢。

Answer 1

我认为这是你所期望的，只需要添加float：left

.more_about{
    background-color: red;
    float:left;
}

Answer 2

请更正代码中的以下错误，以解决问题

1）您已在关闭 more_about 的div之前关闭 body 标记身体标签应始终在页脚下方的末端关闭。

2）你需要使用类 clearfix 添加div，如下所示，在你的div之前使用class .more_about来清除应用于上部div的所有浮动。

<div class="clearfix"></div> <!-- this will clear all the  floats -->
<div align="center" class="more_about">
    <a href="{% url 'academics' %}">&nbsp;&nbsp;Read more about gentle
    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>

css类被应用于整个页面而不是特定的div

2 个答案: