Question

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

我有这个布局： enter image description here

现在，如果我在较低分辨率下查看我的页面，它会尝试重新排列左右两侧的div，最后将它们重叠在我的中间div上。

enter image description here

我希望将页面设置为在较低分辨率下水平滚动，这样就不会发生这种情况。我已经尝试将定位设置为固定并弄乱它，但它不起作用或效果更差。

我的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;
}

Answer 2

将所有容器div设置为固定宽度，并将width或min-width添加到<body>标记，并将值设置为等于/大于所有容器div的总宽度 - quick demo 。

编辑，只是意识到你使用的位置是固定的，要注意 - 定位一个元素＆＃34;固定＆＃34;因此，窗口的亲戚，滚动条无法正常工作。

Answer 3

您是否尝试过使用视口技术？

在你的头部

<meta name="viewport" content="width=device-width, initial-scale=1" >

然后将CSS尺寸更改为％＆＃39;而不是像素。这也包括字体大小。

[注意：这样可以在移动设备，平板电脑和PC上进行页面查看]

在较低分辨率下，Divs会搞砸

3 个答案: