Question

对不起，标题没有解释。我有页脚，其中包括页脚上方的所有内容。如果我在页脚上方有文本（作为页脚标签的同级标签），则页脚会将文本作为页脚的一部分包含在内。这是我的代码：

<section id="description">
    <div id="description1">
        <div class="container">
            <h3><em>text</em></h3>
            <p>text</p>
        </div>
    </div>

    <div id="description2">
        <div class="container">
            <h3><em>text</em></h3>
            <p>text</p>
        </div>
    </div>
</section>

<footer>
    <div class="container">
        <p id="copywrite">AllKind Corporation, Copyright &copy; 2018</p>
        <a href="credits.html" id="credits">Credits</a>
        <p id=disclaimer>By using this site, you agree to our <a href="privacy.html">Privacy Policy</a> and <a href="toc.html">Terms of Conditions</a>.</p>
        <p id="license">
            <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
                <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" />
            </a>
            <br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
        </p>
    </div>
</footer>

由于某种原因，我的页脚在页脚中包含了说明（<section id="description">的子代）。我将问题缩小到与float: right;的CSS中的description2标记有关。

这是我的CSS的说明和页脚。

/* Description */
#description1 {
    text-align: center;
    font-size: 18px;
    float: left;
    padding-left: 100px;
    padding-top: 30px;
}

#description2 {
    text-align: center;
    font-size: 18px;
    float: right;
    padding-right: 100px;
    padding-top: 30px;
}

/* Footer */
footer {}

#copywrite {
    text-align: center;
    font-size: 13px;
}

#credits {
    font-size: 18px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
}

#disclaimer {
    font-size: 15px;
    text-align: center;
    margin-top: -28px;
    margin-bottom: 0;
}

#license img {
    float: right;
    margin-top: -27px;
}

#license {
    font-size: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: -2px;
}

Answer 1

您需要先清除浮点数。您面临的问题是由于浮动元素

 #description1 {
   text-align: center;
   font-size: 18px;
   float: left;
   padding-left: 100px;
   padding-top: 30px;
 }

 #description2 {
   text-align: center;
   font-size: 18px;
   float: right;
   padding-right: 100px;
   padding-top: 30px;
 }
/*This is to clear the float*/
 .clearfix {
   clear: both
 }

 /* Footer */

 footer {}

 #copywrite {
   text-align: center;
   font-size: 13px;
 }

 #credits {
   font-size: 18px;
   text-decoration: none;
   text-transform: uppercase;
   text-align: left;
 }

 #disclaimer {
   font-size: 15px;
   text-align: center;
   margin-top: -28px;
   margin-bottom: 0;
 }

 #license img {
   float: right;
   margin-top: -27px;
 }

 #license {
   font-size: 10px;
   text-align: center;
   margin-top: 10px;
   margin-bottom: -2px;
 }

<section id="description">
  <div id="description1">
    <div class="container">
      <h3><em>text</em></h3>
      <p>text</p>
    </div>
  </div>

  <div id="description2">
    <div class="container">
      <h3><em>text</em></h3>
      <p>text</p>
    </div>
  </div>
</section>
<div class="clearfix"></div><!--Clearing the float -->

<footer>
  <div class="container">
    <p id="copywrite">AllKind Corporation, Copyright &copy; 2018</p>
    <a href="credits.html" id="credits">Credits</a>
    <p id=disclaimer>By using this site, you agree to our <a href="privacy.html">Privacy Policy</a> and <a href="toc.html">Terms of Conditions</a>.</p>
    <p id="license">
      <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
                <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png"/>
                </a>
      <br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
    </p>
  </div>
</footer>

请注意clearfix元素和CSS中的类

这是jsfiddle演示：http://jsfiddle.net/GCu2D/4533/

Answer 2

如果您想快速地将部分与页脚分开，可以将以下内容添加到CSS中...

MainActivity.java

也许可以解释一些您想要实现的目标。

更新：最好的方法是清除浮点数，如另一个答案中所述。您可以将clear：两者直接应用于页脚，而无需添加其他DIV

Answer 3

我想你想要这样：-

#description1 {
    text-align: center;
    font-size: 18px;
    float: left;
    padding-left: 100px;
    padding-top: 30px;
	width:50%;
}

#description2 {
    text-align: center;
    font-size: 18px;
    float: right;
    padding-right: 100px;
    padding-top: 30px;
	width:50%;
}

/* Footer */
footer {}

#copywrite {
    text-align: center;
    font-size: 13px;
}

#credits {
    font-size: 18px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
}

#disclaimer {
    font-size: 15px;
    text-align: center;
    margin-top: -28px;
    margin-bottom: 0;
}

#license img {
    float: right;
    margin-top: -27px;
}

#license {
    font-size: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: -2px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="description">
    <div id="description1">
        <div class="">
            <h3><em>text</em></h3>
            <p>text</p>
        </div>
    </div>

    <div id="description2">
        <div class="">
            <h3><em>text</em></h3>
            <p>text</p>
        </div>
    </div>
</section>
<div class="clearfix"></div>
<footer>
    <div class="container">
        <p id="copywrite">AllKind Corporation, Copyright &copy; 2018</p>
        <a href="credits.html" id="credits">Credits</a>
        <p id=disclaimer>By using this site, you agree to our <a href="privacy.html">Privacy Policy</a> and <a href="toc.html">Terms of Conditions</a>.</p>
        <p id="license">
            <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
                <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" />
            </a>
            <br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
        </p>
    </div>
</footer>

如果你想这样，我会解释。

在页脚中包含非页脚项目的页脚

3 个答案: