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的高度更大。

Answer 2

删除position: absolute代码中的<p>。

 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%;

  }

  .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>

Answer 3

 Remove position: absolute in <p> tag.
.pozadie class, height: auto;

  body {
    background: #DF7401;
    background-size: cover;
    font-family: Arial;
    color: white;
}

.pozadie {
    background: rgba(0, 0, 0, 0) url("pozadie2.png") repeat scroll 0 0;
    box-shadow: 0 0 6px 2px #000000;
    height: auto;
    margin-left: 16%;
    margin-top: 7%;
    position: absolute;
    width: 70%;
    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%;
}

.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>

如何使文字留在盒子或某些区域？ HTML CSS

3 个答案: