Css 页面看起来比应该的大

我设计了一个网页，其中有3列，如下所示：

[[左][内容][右]]

它是这样表现的：

[[左][右]]
[内容]

wehn I ctrd+向下滚动，看起来还可以，我如何修复此问题

css是：

.advert_panel_right{
width:250px;
height:100%;
float:left;
}

.advert_panel_left{
    width:250px;
    height:100%;
    float:right;
}

.content_wraper{
    width:902px;
    margin: 0px auto;
}

.content{   
    font-family: Verdana, Geneva, sans-serif;
    width:100%;
    margin-left:25px;
}

减小包装的宽度有帮助吗？我相信它太大了

减小包装的宽度有帮助吗？我认为它太大了。

例如：

HTML

​

示例：

HTML

---

​

我需要编辑一些东西（和打字错误），但这里有一个测试用例。工作正常：

首先：右面板向右浮动，左面板向左浮动。摆脱打字错误“

内容”\u wrapper

”。我假设

.content

是中间的div，而

.content\u wrapper

是包装器

---

您的

.content

不能为100%宽度，因为它将获取其父级的值并使用该值。这意味着您有三个div，分别是250px、902px（+25px边距）和250px，您希望将它们放在一个div的902px中。那是行不通的。只需计算.content div的大小：902-250-250-25=377px。然后让它

浮动：左。它会工作的（就像我的例子中那样）
我需要编辑一些东西（和输入错误），但这里有一个测试用例。工作正常：

首先：右面板向右浮动，左面板向左浮动。摆脱打字错误“
内容”\u wrapper
”。我假设
.content
是中间的div，而
.content\u wrapper
是包装器

您的
.content
不能为100%宽度，因为它将获取其父级的值并使用该值。这意味着您有三个div，分别是250px、902px（+25px边距）和250px，您希望将它们放在一个div的902px中。那是行不通的。只需计算.content div的大小：902-250-250-25=377px。然后让它
浮动：左。它可以工作（就像我的示例中一样）
注意，ctrl+scroll-down是大多数浏览器缩小的快捷方式（假设您使用的是鼠标滚轮）。这意味着您可能从一开始就被放大了。在浏览器中，转到“工具”->“设置”->“缩放”->“重置”或等效设置。您似乎有一个固定的规格，即1427像素宽（内容边栏两端各250像素，内容本身为902+25像素）。如果您的视口小于此值（或您有一个滚动条）您的内容将被推到底部。请注意，ctrl+向下滚动是大多数浏览器的快捷方式（假设您使用的是鼠标滚轮）用于缩小。这意味着您可能从一开始就被放大了。在浏览器中，转到“工具”->“设置”->“缩放”->“重置”或等效设置。您似乎有一个固定的规格，即1427像素宽（内容边栏两端各250像素，内容本身为902+25像素）。如果您的视口小于此值（或者你有一个滚动条）你的内容会被推到底。410px？我想是406（200+100+100+2x3）.我也不认为你的答案与此相关。他的代码有问题。你只是给出了一个类似但不完全相同的案例的示例。布拉姆，我正在帮助这些人。他想做的正是这个，我为他创建了这个示例，这是他想要的3个专栏，简单明了。我更喜欢更多的信息，而不是不够，他现在说有几个选项。请删除您的负面评论，我将410改为406。他也接受了我的答案。是的，我很抱歉。我认为我太快了。不过，我仍然认为您没有真正回答这个问题。他在布局和设计方面有具体问题（902px宽度，25页边距等等）.你的例子简单明了，如何创建一个三列布局，但不超过这个。410px？我想说406（200+100+100+2x3）.我也不认为你的答案与此相关。他的代码有问题。你只是给出了一个类似但不完全相同的案例的示例。布拉姆，我正在帮助这些人。他想做的正是这个，我为他创建了这个示例，这是他想要的3个专栏，简单明了。我更喜欢更多的信息，而不是不够，他现在说有几个选项。请删除您的负面评论，我将410改为406。他也接受了我的答案。是的，我很抱歉。我认为我太快了。不过，我仍然认为您没有真正回答这个问题。他在布局和设计方面有具体问题（902px宽度，25页边距等等）。您的示例简单明了如何创建三列布局，但仅此而已。
.content_wraper{
    width:802px;
    margin: 0px auto;
}

<div id="wrapper">
    <div id="left"></div>
    <div id="content"></div>
    <div id="right"></div>
</div>

#left, #content, #right {
  float:left;
  height:100px;
  border:1px solid red;
}

#left, #right {
   width:100px;
}    
#content {
   width:200px;
}
#wrapper {
    width:406px; /* 400 + borders */
    margin:0 auto;
}