时间戳

首页 > 解决方案 > div 部分一直在其他 div 部分之上，不知道为什么

html - div 部分一直在其他 div 部分之上，不知道为什么

问题描述

我试图在文本部分下方（实际页脚之前）获取“学习” div 部分，但由于某种原因，当我添加图片（我浮动到文本右侧）时，“学习” div 现在位于文本部分的顶部。图像/文本是同一个 div 容器的一部分。

我能做些什么来纠正这个问题吗？

谢谢

.introduction img{
  float: right;
}

.introduction p{
  width:60%;
  text-align:center;
  margin:0 auto;
  line-height: 30px;
  font-size:16px;
  padding: 10px;
  float: left;
  display: block;
}

/********* Footer with links ************/
.footerwrapper {
  padding: 10px 20px;
  padding-left: 50px;
  padding-right: 50px;
  background-color: #333;
  position: absolute;
}

.contentcontainer {
  margin-right: auto;
  margin-left: auto;
}
.footitle p {
  text-align:left;
  color: #EEEEEE;
}

.twocols {
  column-count: 2;
  column-gap: 5px;
}

.twocolsblock1 .twocolsblock2 {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
  width: 31%;
  align-items: center;
}

.lessonlinkblurb.footer {
  color: #E5E5E5;
  font-size: 13px;
  line-height: 21px;
  cursor: pointer;
  text-decoration: none !important;
}
<div class="introduction">
    <img src="images/Chokwe_People.jpg" alt="Chokwe Language in Africa" width="300" height="300">
    <p>
        KUCHI is one of the most common words you will hear spoken throughout the Chokwe world. This is the simplest greeting, and is often the first word learned by those who have an interest in the language.

    </p>
</div>
<div class="footerwrapper">
    <div class="contentcontainer">
        <h3 class="footitle">
        <p id="learn">Learn Chokwe</p>
        <div class="twocols">
            <div class="twocolsblock1">

                <a href="/greetings.html" class="lessonlink w-inline-block">
                    <div class="lessonlinktitle footer">Greetings</div>
                    <div class="lessonlinkblurb footer">How to greet and some basic phrases in Chokwe</div>
                </a>

                <a href="/intro.html" class="lessonlink w-inline-block">
                    <div class="lessonlinktitle footer">Introductions</div>
                    <div class="lessonlinkblurb footer">How to introduce yourself and your family in Chokwe</div>
                </a>

                <a href="/scenarios.html" class="lessonlink w-inline-block">
                    <div class="lessonlinktitle footer">Scenarios</div>
                    <div class="lessonlinkblurb footer">Learn what to say in certain scenarios in Chokwe</div>
                </a>

                <a href="/timenumbers.html" class="lessonlink w-inline-block">
                    <div class="lessonlinktitle footer">Time and time concepts</div>
                    <div class="lessonlinkblurb footer">How say late, early and days of the week, months of the year in Chokwe</div>
                </a>
            </div>

            <div class="twocolsblock2">
                <a href="/learn-italian/question-words" class="lessonlink w-inline-block">
                    <div class="lessonlinktitle footer">Question words</div>
                    <div class="lessonlinkblurb footer">Who? What? When? Where? Why? How? How much? How many? <br>How to ask questions in Chokwe</div>
                </a>

                <a href="/verbs.html" class="lessonlink w-inline-block">
                    <div class="lessonlinktitle footer">Important Verbs</div>
                    <div class="lessonlinkblurb footer">To be, To Have, To Do, To Say, To Go, To Know, To Want, To Can & To Use. <br> How to use verbs in Chowke</div>
                </a>

                <a href="/proverbs" class="lessonlink w-inline-block">
                    <div class="lessonlinktitle footer">Proverbs</div>
                    <div class="lessonlinkblurb footer">Learn some important sayings and proverbs in Chokwe</div>
                </a>
            </div>
        </div>
    </div>
</div>

标签： htmlcssdivide

解决方案

  1. position: absolute;从 div中删除.footerwrapper。
  2. 将任意名称的类添加到.introductiondiv 并应用这些属性，如下所示
.clearfix:after  {
  content: "";
  display: table;
  clear: both;
}

<div class="introduction clearfix">

代码笔： https ://codepen.io/manaskandelwal1/pen/QWKZoqJ

推荐阅读