如何使文字停留在方框或某些区域？ HTML CSS

Question

我的网站有问题。 我正在尝试使两个“框”彼此相邻，并在其中包含文本。 但是，左侧的文本覆盖了右侧框中的文本。 这是网站的屏幕截图，所以您知道它的外观。 网站的屏幕快照我的代码在这里。 我已经用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>标记中的position: absolute 。

  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>