Question

我有一个模板，它有3个等距的盒子，问题是我无法让最后一个盒子正确对齐前两个元素。

如何在没有表格的情况下在css中添加3块等间隔的框？

我的尝试http://khine.3b1.org/activities/activities.html

任何建议都非常感激。

感谢

Answer 1

让所有三个盒子向左浮动：

.box ul.supports-list li.last {
 width: 200px;
 position: relative;
 float: left;
}

并提供更多宽度：

.box .holder .frame {
  background: url(./box-b.gif) no-repeat 0 100%;
  width: 620px;
  padding: 18px 4px 42px 16px;
}

Answer 2

尝试将下一个CSS规则更改为：

.box ul.supports-list {
    font-size: 11px;
    list-style: none outside none;
    margin: 7px 0 0;
    overflow: hidden;
    padding: 0;
}

.box ul.supports-list li.supports-list-item {
    display: list-item;
    float: left;
    outline-style: none;
    width: 200px;
}

.box ul.supports-list li.last {
    float: left;
    width: 200px;
}

Answer 3

我的猜测是将每个框放入div中，然后调整每个div的margin-left和margin-top属性以使它们全部对齐。您还希望将所有框的float属性设置为left。它可能不是最广泛接受的做事方式，但这就是我通常如何解决这样的问题。

你可以看一下我在这里为你做的jsFiddle这个例子：http://jsfiddle.net/Cwca22/g8x5E/ - 希望这会有所帮助！

css问题在对齐3块等间隔的盒子

3 个答案: