0

我的页面有问题。
在 Facebook 或 Twitter 上，当您调整浏览器窗口的大小时，页面看起来就像未调整大小时一样，我该如何在我的页面上做到这一点？例如，如果我有此代码并调整窗口大小，则该框始终位于页面中间并且没有“被阻止”。
尝试用我的代码调整页面大小，框会移动并改变尺寸，我想避免这种情况。

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
    </head>
<body>

<div style="width:100px; height:100px; position:absolute; top:50%; left:50%; margin-top: -50px; margin-left: -50px; background:#ccc;"></div>

</body>
</html>

我可以做什么？我必须使用javascript吗？

4

2 回答 2

1

听起来您正在寻找最小宽度和最小高度，从而迫使您的元素溢出。

我强迫了一个非响应式布局，这似乎是你的意图：这里有一段代码：http: //jsfiddle.net/paperblankets/YTk6t/

并且代码在这里像你一样重新格式化：

<html>
<body>
<span style="display:block;min-width:280px;">
<div style="    width:250px;
    /* Random dimentions */
    height:200px;
    /* Random dimentions */
    display:inline-block;
    /*Allow Elements to sit next to each other */
    margin: 10px;
    /* Slight padding to see the elements  */
    background:#ccc;
    /* Slight color to see the elements */
    overflow: visible;
    /* Allow elements to overflow, and scroll bar to appear */"></div>
</span>
</body>
</html>

请查看我链接到的 Fiddle 中的评论，它分解了哪个规则导致了哪些影响。

于 2013-06-18T17:25:01.830 回答
0

您可以使用 JavaScript（查看onResize事件）或 CSS 媒体查询。

由于您的问题含糊不清，我们无能为力。

于 2013-06-18T17:25:54.303 回答