0

我在 960 宽的画布上设计三列布局的方式有问题。

这是我正在尝试的图表：

在此处输入图像描述

我有一个 960 宽的 DIV 元素。它的外部有一个 20 像素的填充，我需要在里面有 3 个相等的列。

有人可以帮我处理三列，所以每个框和中间的边距都相等吗？2 列和 4 列很简单，但除以 3 与包含元素中的 20px 填充相加并不相等。当使用 2 列和 4 列时，我使用 FLOAT:LEFT 和一个带有 CLEAR 的额外元素。

<style>
.960_element { width:960px; padding:20px; }
.960_element .left {  }
.960_element .middle {  }
.960_element .right {  }
</style>

<div class="960_element">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
4

2 回答 2

0

第一个你的.960_element类名是错误的，你不能定义一个以数字开头的类名

演示

HTML

<div class="element">     
    <div class="left">h</div>     
    <div class="middle">h</div>     
    <div class="right">h</div>
</div>

CSS

.element { width:960px; padding:20px;background-color: #dddddd;margin: 40px;/*margin not required*/}
.element div {background-color: #ff0000;}
.left { height: 200px; width: 32%; display: inline-block;}
.middle { height: 200px; width: 32%; margin-left: 14px;  display: inline-block; }
.right { height: 200px; width: 32%; margin-left: 14px;  display: inline-block; }
于 2012-11-04T06:49:21.157 回答
0

更常见的做法是在每个项目周围放置 10 像素的边距，这样项目之间的间距加起来为 20 像素，而两侧的间距只有 10 像素。

对于您的情况，您的框需要 293（和三分之一）像素宽，这是从 960-80/3（宽度，减去边距，除以框）计算得出的。

如果您的宽度为 980，或者如果您的左右两边有 10 个像素的边距，您最终可能会得到一个不错的偶数 (300) 框。

于 2012-11-04T06:51:58.560 回答