css - 页面看起来比它应该的大

Question

我设计了一个包含 3 列的网页，排列如下：

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

它显示如下：

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

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

Answer 1

示例：http: //jsfiddle.net/GN8RL/

HTML

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

CSS

#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;
}

​</p>

Answer 2

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

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

Answer 3

我需要编辑一些东西（和一个错字），但这是一个测试用例。工作正常：http: //jsfiddle.net/UZfBc/

首先：将右侧面板浮动到右侧，左侧面板向左浮动。摆脱错字' content_wraper'。我假设那.content是中间 div，那.content_wrapper是包装器。

您的.content宽度不能为 100%，因为它将采用其父值并使用它。这意味着您有三个 div，分别为 250px、902px（+25px 边距）和 250px，您希望将它们放入一个 902px 的 div 中。那永远行不通。只需计算 .content div 的大小：902 - 250 - 250 - 25 = 377px。然后让它float: left;。它会起作用（就像在我的例子中一样）