html - 当分辨率较低时，div 会变得困惑

Question

我在下面添加了 2 个屏幕截图，以帮助理解我的问题和我想要实现的目标。

我有这样的布局:

现在，如果我以较低的分辨率查看我的页面，它会尝试重新排列左侧和右侧的 div，最终使它们与我的中间 div 重叠。

我想将页面设置为在较低分辨率下水平滚动，这样就不会发生这种情况。我试过将定位设置为固定并乱搞它，但它没有任何效果，甚至效果更差。

我的 HTML:

<div id="middle">

    <div id="next_event">
        <p class="no"><h4><u>Next event: 13.04</u></h4></p>
        <p class="no" style="font-size: 18px; text-align:left;"><span style="color: #0565a8;">Thema:</span> Sozialwissen
        <br><span style="color: #0565a8;">&nbspLocation:</span> Waehringer-Strasse 38, Wien
        <br><span style="color: #0565a8;">&nbspEintritt:</span> Freier Eintritt
        <br><span style="color: #0565a8;">&nbspGast:</span> Max Musterman
        <br><span style="color: #0565a8;">&nbspInfos:</span> 
        <a href="events.html" style="color: #333; text-decoration:none;"><u>Hier klicken</u></a></p>
    </div>

    <div id="team">
        <p class="no"><h4><u>Team</u></h4></p>
        <img src="img/photo.png" hspace="5" vspace="0">
        <img src="img/photo.png" hspace="5" vspace="5">
        <br>
        <img src="img/photo.png" hspace="5" vspace="5">
    </div>

    <div id="content"><p class="big">The thesis statement is that sentence or two in your text that ..</p><hr>

我的 CSS:

#middle
{
    overflow:visible;
}

#content
{
    font-size: 17px;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    min-height: 800px;
    margin:100px auto 100px;
    width:800px;
    padding: 10px;
/*  border: 1px solid #373737;
    box-shadow: 1px 0px 2px #000000; */
    position:relative;
    word-wrap: break-word;
    /* background-color: white; */
    z-index:50;
    /* --- Add for scroll --- */
    /*  overflow: scroll;
        height: 700px;  */
}


#team
{
    position: fixed; 
    color: black; 
    left: 100;
    margin-top:20px;
    width: 400px;
    height: 200px;
    border-style: solid;
    border-width: 3px;
    border-color: #0565a8;
    text-align: center;
}

#next_event
{
    position:fixed; 
    color: black; 
    right: 100;
    margin-top: 20px;
    width: 400px;
    height: 200px;
    border-style: solid;
    border-width: 3px;
    border-color: #0565a8;
    text-align: center;
} 

Answer 1

所以我想通了。我只需要将所有中间 div 的宽度更改为 % 而不是 px。这意味着我的登录名、next_event 和团队 ID 现在的宽度为:21%。

#team
{
    position: fixed; 
    color: black; 
    left: 100;
    margin-top:20px;
    width: 21%;
    height: 200px;
    border-style: solid;
    border-width: 3px;
    border-color: #0565a8;
    text-align: center;
}