0

我有页面要维护，这是由其他人开发的非常糟糕。现在对我来说，每一次改变都是一次真正的考验。现在页面看起来基本上是这样的：

 ____________________
|                    |
|        body        |
|                    |
|                    |
|    width: 1000px   |
|                    |
|                    |
|____________________|

我想添加一些带有链接的 div，所以页面应该如下所示：

 _______ ____________________ _______
| left  |                    | right |
| 400px |        body        | 400px |
| width |                    | width |
|_______|                    |_______|
        |    width: 1000px   |
        |                    |
        |                    |
        |____________________|

主体应该居中，并且取决于窗口大小，左右 div 应该完全显示或仅显示其中的一部分。我在网上搜索了类似的问题并尝试了不同的解决方案，但它们导致页面崩溃并且页面元素一团糟。

如何轻松添加这些 div？

4

4 回答 4

4

检查这个小提琴：http: //jsfiddle.net/GSygt/

在上面的小提琴中，在 CSS 中将中心内容的宽度更改为 1000px。我使用了 200px 以便结果在 jsfiddle 输出窗格中可见。

HTML

<html>
    <body>  
        <div class="center">

            This is my content!

            <div class="side left">LEFT</div>       
            <div class="side right">RIGHT</div>
        </div>
    </body>    
</html>

CSS

body {
    overflow-x: hidden;    
}
.center {
    position: relative;
    width: 200px;   /* change this to 1000px */
    background-color: #dfd;    
    margin: auto;
    text-align: center;
    min-height: 600px;
}
.side {
    position: absolute;
    width: 400px;   
    top: 0;
    background-color: #ddd;
    text-align: center;
    min-height: 200px;
}
.left {
    left: -400px;
}
.right {
    right: -400px;
}
于 2012-07-02T12:41:05.543 回答
2

So I'm assuming you can't change anything in your design, the only thing you can do is add the divs to the body. If that's the case here's how I'd do it: http://jsfiddle.net/joplomacedo/4p6nw/

1) First set the widths on your new divs.
2) Then float each other to their own side.
3) Add a negative margin to the side they're floated to equal to their width.
4) On the body, add a padding-left equal to the floated left div's width, then add a padding-right equal to to right floated div's width.

For this HTML...

<body>
   <div class="left-div"></div>
   <div class="right-div"></div>
</body>

...the CSS

body {
  width: 1000px;
  margin: 0 auto;
  padding: 0 400px;
}

.left-div {
  float: left;
  width: 400px;
  margin-left: -400px;
}

.right-div {
  float: right;
  width: 400px;
  margin-right: -400px;
}
于 2012-07-02T12:45:17.263 回答
0

可能使用绝对定位。（虽然我也建议不要使用 1800px 作为静态宽度，但我猜这两个侧边栏是用于广告的，而且我之前与营销猴子有过关于页面宽度的相同论点，所以我理解）

.center {位置：绝对；顶部：0；左：50%；左边距：-500px；显示：块；}

然后在中间有左右，但也用绝对定位将它们拉出。

所以例如

.right {位置：绝对；顶部：0；右：-400px；宽度：400 像素；}

和左相反。

希望这会有所帮助，会有一个水平滚动条，但同样适用于浮动元素。

于 2012-07-02T13:51:51.370 回答
-3

我不建议将您的网站设置为 1800 像素的宽度。

但你可以遵循以下结构： 3 td like

<table>
<tr>
<td id="first" valign=top> content </td>
<td id="middle" valign=top> content </td>
<td id="last" valign=top> content </td>
</tr>
</table>

并禁用滚动将其添加到您的样式表：

body{overflow-x:hidden;}
于 2012-07-02T12:27:24.570 回答