html - 如何让文字留在方框或某个区域？ HTML CSS

Question

我的网站有问题。我正在尝试制作两个彼此相邻的“框”，其中包含文本。但是，左边的文本覆盖了右边框中的文本。这是网站的截图，所以你知道它的样子。 Screenshot of website我的代码在这里。我已经用 html 和 css 编写了它。但我认为只有类“pozadie”、“box-1”、“box-2”、“textvboxe”才重要。请帮我。

我试图正确地解释它。

  body {
    background: #DF7401;
    background-size: cover;
    font-family: Arial;
    color: white;
}

.pozadie {
    position: absolute;
    width: 70%;
    background: url(pozadie2.png) repeat;
    height: 120%;
    box-shadow: 0 0 6px 2px #000000;
    margin-left: 16%;
    margin-top: 7%;
    z-index: -50;
}

.box-1 {
    width: 45%;
    height: 40%;
    background: #DF7401;
    box-shadow: 0 0 6px 2px #DF7401;
    margin-left: 2%;
    float: left;
    margin-top: 6%;
}

.box-2 {
    width: 45%;
    height: 40%;
    background: #DF7401;
    box-shadow: 0 0 6px 2px #DF7401;
    margin-right: 2%;
    float: right;
    margin-top: 6%;
}

p {
    margin-left: 3%;
    font-family: Helvetica;
    font-size: 15px;
    color: #FFFFFF;
    margin-right: 3%;
    position: absolute;
}

.textvboxe {
    margin-left: 0%;
    font-family: Helvetica;
    font-size: 15px;
    color: #008000;
    margin-right: 3%;
    margin-top: 23%;
}

h2 {
    text-align: center;
    font-family: Helvetica;
    font-size: 25px;
    color: #FFFFFF;
    margin-top: 9%;
}

<div class="pozadie">
    <div class="box-1">
        <div class="obrazokvboxe"><img src="chudnutie.png"></div>
        <h2>Chudnutie</h2>
        <div class="textvboxe">
            <p>
                Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10
                rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela. Volam
                sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej
                krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu
                tela.
            </p>
        </div>
    </div>
    <div class="box-2">
        <div class="obrazokvboxe"><img src="zdravie.png"></div>
        <h2>Zdravá výživa</h2>
        <div class="textvboxe">
            <p>
                Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10
                rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela.
            </p>
        </div>
    </div>
</div>

Answer 1

您需要从 p 标签类中删除 position:absolute。应该是

p {
         margin-left: 3%;
         font-family: Helvetica;
         font-size: 15px;
         color: #FFFFFF;
         margin-right: 3%;
          position: relative;
      }

您还需要使您的 div 的高度更大。