Question

我设计了一个包含3列的网页：

[[left] [content] [right]]

它显示如下：

[[left] [right]]
[内容]

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

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;。它会起作用（就像在我的例子中一样）

页面看起来比应该大

3 个答案: