Question

我有要维护的页面，其他人开发得很差。对我来说，每一次改变都是一场真正的磨难。现在页面看起来基本上是这样的：

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

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

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

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

如何轻松添加这些div？

Answer 1

检查这个小提琴：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;
}

Answer 2

所以我假设你不能改变你的设计中的任何东西，你唯一能做的就是将div加到身上。如果是这样的话我就是这样做的：http://jsfiddle.net/joplomacedo/4p6nw/

1）首先设置新div的宽度 2）然后互相漂浮到自己的身边 3）在它们浮动的一侧加上一个负余量，使其等于它们的宽度 4）在主体上，添加一个等于浮动左div宽度的填充左边，然后添加一个等于右浮动div宽度的填充 - 右边。

对于这个HTML ...

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

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

Answer 3

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

.center {position：absolute;顶部：0;左：50％; margin-left：-500px; display：block;}

然后在中心左右两侧，但也绝对定位将它们拉出来。

所以例如

.right {position：absolute;顶部：0;右：-400px;宽度：400px;}

和左边相反。

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

Answer 4

我建议不要让您的网站宽度达到1800像素。

但您可以按照以下结构：表3 td喜欢

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

三个div比屏幕宽，没有滚动

4 个答案: