Question

我一直在摆弄Css，必须让我的文本和图像在移动设备上响应。当我缩小浏览器的图像时，文本会缩小以显示图像，但是现在我的lorem ipsum文本被下推了。我没有使用填充或边距来实现这一点，我试图将所有文本保留在div中，但文本上似乎有很多边距。

我查看了我的代码，找不到任何可能导致此问题的内容，并删除了每个代码段以尝试查看它是否可以解决问题。似乎没有任何作用。

html：

<body>

    <table >
    <tr>
        <td >Home</td> <!--Made 8 boxes, 100%/8boxes is 12.5, so to make them even just assign 12.5%-->
        <td >About Us</td> <!--Can see how CSS comes in handy...could just call td{width:12.5%; align:center;-->
        <td`enter code here` >Contact Us</td>
        <td >Menus</td>
        <td >Varieties</td>
        <td >Feedback</td>
        <td >SignUp</td>
        <td >Login</td> 
    </tr>
    </table>

    <p id="mainWall"></p>
    <h1 class="mImageText">Paratore's Pizza</h1>


    <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
    </p>


</body>
</html>


table{
    width:100%;  
}

td{
    height: 100px;
    color:white;
    background-color: #c40909;
    text-align: center;
    width: 12.5%;
    border-radius: 22px;
    font-size: 25px;
}

td:hover{
    background-color: #ff9a26;
    transform: scale(.9, .9);
}

#mainWall{

    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
    height: 75vh;

    width: 100%;
    background: url(images/mainWall.jpg);
      background-repeat: no-repeat;
      background-position: bottom bottom;
      background-position: center center;


      background-attachment: scroll;
      background-size:cover;
      border-radius: 20px;
}

.mImageText {
    position: relative;
    top: 50%;
    transform: translateY(-175%);
    color: #ffffff;
    font-family: 'Russo One', sans-serif;
    font-size: 9vw;
    text-align: center;
    opacity: 1;
    letter-spacing: 2vw; 
    text-shadow: 10px 15px #a80303;
    }

我希望文本更接近图像，而不是一直向下滚动以滚动

Answer 1

您的mImageText类的y值为-175％。这加上mainWall类的高度导致了差距。尝试将mainWall的高度更改为较小的值，例如10vh，然后从mImageText删除translateY

Answer 2

我不确定您的某些规则。我删除了以下2条规则-这些是问题所在：

table{
    width:100%;  
}

td{
    height: 100px;
    color:white;
    background-color: #c40909;
    text-align: center;
    width: 12.5%;
    border-radius: 22px;
    font-size: 25px;
}

td:hover{
    background-color: #ff9a26;
    transform: scale(.9, .9);
}

#mainWall{

    margin-left: auto; 
    margin-right: auto; 
    text-align: center;

    width: 100%;
    background: url(images/mainWall.jpg);
      background-repeat: no-repeat;
      background-position: bottom bottom;
      background-position: center center;


      background-attachment: scroll;
      background-size:cover;
      border-radius: 20px;
}

.mImageText {
    position: relative;
    color: #ffffff;
    font-family: 'Russo One', sans-serif;
    font-size: 9vw;
    text-align: center;
    opacity: 1;
    letter-spacing: 2vw; 
    text-shadow: 10px 15px #a80303;
    }

<html>
<body>

    <table >
    <tr>
        <td >Home</td> <!--Made 8 boxes, 100%/8boxes is 12.5, so to make them even just assign 12.5%-->
        <td >About Us</td> <!--Can see how CSS comes in handy...could just call td{width:12.5%; align:center;-->
        <td>Contact Us</td>
        <td >Menus</td>
        <td >Varieties</td>
        <td >Feedback</td>
        <td >SignUp</td>
        <td >Login</td> 
    </tr>
    </table>

    <p id="mainWall"></p>
    <h1 class="mImageText">Paratore's Pizza</h1>


    <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
    </p>


</body>
</html>

IntStream

Answer 3

使lorem ipsum文本更接近其上方元素的一种方法是在该段落上放置class或id。然后给它一个负数top-margin：

CSS：

   #lorem {
    margin-top: -8em;
    }

HTML：

<p id = "lorem">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos cumque necessitatibus distinctio iste aperiam.
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum deleniti incidunt iusto architecto animi dolore cum quod modi earum, nisi est aspernatur quibusdam iure eos
    </p>

如何使文字更接近图像？

3 个答案: