Question

我本周刚刚开始使用HTML / CSS，很抱歉，如果我在任何地方听起来都很愚蠢。无论如何，这是我的问题：

我正在编写一个网站，其中所有内容都由边框包围。左右边距为25％。现在，当我缩小浏览器时，所有内容总是在浏览器中保持25％。我希望网站首先用尽左右25％的可用空间...如果我没有正确解释，我会举一个例子。当您正在阅读PDF文件（http://www.kb.nl/sites/default/files/docs/pdf_guidelines.pdf打开以尝试）并缩小窗口大小时，A4页面大小的块（所有内容）不会缩小，直到使用左侧和右侧的所有灰色空间起来。我希望在我的网站上有这个。以下是截图：

http://i.imgur.com/uhq035r.png＆lt; - 全尺寸
SKkt4DK.png＆lt; - shirnkied window

不能发布超过2个链接，这就是为什么我只放置图片ID。所以是的，我怎么能做到这一点？

编辑：我之前尝试过定位属性，但它没有用。

Answer 1

您需要做的是将内在内容放在容器中。容器的宽度应为页面的100％，内部内容的左/右边距设置为自动。

这样，当页面的宽度缩小时，容器仍然占据宽度的100％，但内部内容的边距正在调整为新的更改。

<强> HTML

<div id="container">
    <div id="content">

    </div>
</div>

<强> CSS

    #container{
        width:100%;
        height:800px;
        background-color: gray;
    }
    #content{
        width:800px;
        height:100%;
        background-color: green;
        margin: 0 auto;
    }

演示： http://jsfiddle.net/zvo4u72x/

相应地进行调整，但使用此示例代码应该展示您需要的内容。

当窗口缩小时，CSS首先使空闲空间减少

1 个答案: