Responsive design 仅响应内容div

好的，我的布局由两个元素组成，一个导航（“左”）和实际的站点内容（“右”）

现在我想要的是“left”div保持原样，但是当将屏幕缩小到一定大小时，我希望content div的宽度也随之减小

然而，我不知道如何开始。当我查找响应式web设计时，我只能找到整个布局的骨架，其中包含大量的div和百分比，但我只想将其用于一个div，我完全困惑了

这就是我现在拥有的：

.right {
    width: 750px;
    margin: 40px 0 40px 50px;
    float: left;
    position: relative;
}

.left {
    margin: 40px 0px 40px 40px;
    width: 210px;
    float: left;
    position: relative;
}

希望这不会太让人受不了

---

本质上，你需要css中的百分比和html中的元标记来获得你想要的效果。

你要求的不是完全响应的设计。如果我理解正确，您将需要百分比宽度

HTML:

---

感谢您提供了这两个解决方案，它很有效，代码看起来也很简单。现在我想知道，如果窗口正在调整大小，是否也可以在固定宽度（例如700px）下“开始”，然后缩小宽度？您的意思是希望左侧为700px，然后一旦窗口达到一定大小，div会缩小到500px？实际上，我希望左侧在任何情况下都是固定宽度，但我已经有了。我想要你说的话，但要在右边。你可以通过媒体查询来检测屏幕的宽度。在中，我检测屏幕的宽度是否至少为900px，并为

.right

和

.left

元素添加固定宽度。这会让你走上正确的轨道吗？好吧，这是可行的，但出于某种原因，我正确的内容div不是750px（就像我说的，它应该在css中）。我把相关的CSS放在上面。

<div id="left">
    <a href="#">Nav1</a> <br>
    <a href="#">Nav2</a> <br>
    <a href="#">Nav3</a> <br>
    <a href="#">Nav4</a> <br>
</div>

<div id="right">
    This is where the main content will go.
</div>

body { margin: 0; padding: 0; }

#left {
    width: 20%;
    height: 100%;
    background: red;
    float: left;
    text-align: center;
}

#right {
    width: 80%;
    height: 100%;
    background: blue;
    float: left;
    text-align: center;
}