Question

我想知道如何不让段落剪辑通过图像，以及如何不让段落中的文本脱离屏幕，我正在使用

来制作我在段落中键入的段落（ Apar），它使文本不显示在屏幕上，我在另一段中键入了另一段（Cpar），并将其剪切到图像中，请帮助我解决此问题。谢谢

     body {
     margin: 0;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     }
  
     header {
     display: flex;
     align-items: center;
     border-bottom: 4px solid gray;
     }
  
     .nav {
     flex: 1 0 auto;
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     font-family: sans-serif;
     }
  
     .nav li {
     margin: 0 0 0 2em;
     }
   
     main {
     flex: 1 0 auto;
     padding: 2%;
     background-color: white;
     }
  
     footer {
     flex: 0 0 auto;
     padding: 2%;
     background-color: white;
     }
    .BigData {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     padding-top: 40px;
    
     }
      .Apar {
      text-align: right;
      position: absolute;
      top: 200px;
      left: 1450px;
      color: white;
      font-family: sans-serif;
      font-size: 20px;
      }
      .Cpar {
      color: white;
      font-family: sans-serif;
      font-size: 20px;
      text-align: right;
      position: absolute;
      top: 200px;
      }

    <head>
        <link rel ="stylesheet" href="index.css">
        <meta charset = "UTF=8">
        <meta name="description" content="denvware software solutions">
        <title>Denvware</title>
     </head>
    <body style="background-color:rgb(255, 255, 255)">
        <header>   
                <img src="Logo1denv.png" width="160" style="background- 
     color:antiquewhite" class="ImageLogo"/>
           
                        <ul class="nav">
                                <li><h3>Home</h3></li>
                                <li><h3>About</h3></li>
                                <li><h3>Contact</h3></li>
                        </ul>
        </header>
            <main style="background-color: rgb(53, 60, 68)">
                    <img src="Bigdata3.jpg" width="720" class="BigData"/>
                    <p class="Apar">Insert Text Here</p>
                    <p class="Cpar">Insert Text Here</p>
            </main>
            <footer>
                <h6>Copyright</h6>
            </footer>
     </body>
    
     </html>

Answer 1

奥马尔。欢迎使用堆栈溢出。我不确定您要在这里完成什么，但是您的文字如此显示的主要原因是因为您在段落中设置了position: absolute。

定位的元素离开normal flow，并相对于它们拥有的第一个定位父元素，或者就您而言，是“ body”元素。因此，您的Apar 不管它可能找到任何图像，它始终距页面顶部200px。

如何使段落不剪辑任何内容或不显示在屏幕外

1 个答案: