Question

我有三个div，每个div都嵌套在<p>个元素中。

`

<div id="mainHeader">
<img id="mainThumbnail" src=    "../Pictures/myWebsite/mainThumnail-cropped.png" alt="D&D setup">
    <div id="mainContent">
    <h2>This is the title of an article</h2>
    <p>this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco   laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
 </div>

 <div id="secondContainer">
 <img src="../Pictures/Gamerati/00-Freud.jpg" alt="Freud everyone!">
    <div id="secondArticle">
        <p>
        <span style="font-weight:bold;">This is another article.</span>
        this is the content of the article. L
        orem ipsum dolor sit amet, consectetur adipiscing elit, 
        </p>
    </div>
 </div>

 <div id="thirdArticle">
<p>
    <span style="font-weight:bold;">This is yet another article</span>

this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</p>

`

（抱歉，如果风格那么糟糕）

我看到的是，当窗口垂直挤压时，段落将在屏幕上向上移动，<p>元素必须在每行上放置较少的单词以适应设定的边距。所以现在这些段落是垂直更长的。无论如何都有段落＆＃34;下推＆＃34;这个额外长度的页面而不是向上增长？

这里是CSS：

#frontPage{
    position:relative;
    margin:auto;
    max-width:800px;
    height:800px;   
}

#frontPage p{
    background-color:#7C7C7C;   
}  

#frontPage h4{
     background-color:#7C7C7C;  
 }

 #mainContent{
    position:absolute;
    width:50%;
    text-align: center; 
    border-right: medium;
    border-right-style:solid;
    border-right-color:#000000;
    margin-top:15%;
 }


#mainContent p {
    margin-left:12%;
    margin-right:12%;
    background-color:#7C7C7C;   
}

#secondArticle{ 
    text-align:center;
    width:20%;
    float:right;
    margin-top:27%;
 }


#thirdArticle{
    text-align:center;
    width:20%;
    float:right;
    clear:both; 
 }

#secondContainer {
    background-color:#7C7C7C;   
}

#secondContainer img{
    width:15%;
    margin-top:40%;
    float:left;
}

我考虑过创建一个onWindowResize侦听器，但任何类型的off set都将完全取决于跟踪和错误。

Answer 1

#frontPage{
    position:absolute;
    margin:auto;
    max-width:800px;
    height:800px;   
}

position:aboslute;并使用vh代替％

#secondArticle{ 
    text-align:center;
    width:20%;
    float:right;
    margin-top:27vh;
 }

Answer 2

我使用了特定的像素长度而不是百分比，问题就消失了。我也有一个div标签不合适。小心写代码，小孩。

当窗口水平调整大小时，<div>正在向上移动

2 个答案: