如何水平对齐跨距或div？

Question

我唯一的问题是让它们排成三排并且间距相等.显然,跨距不能有宽度和div(和带有display:block的跨距)不会彼此相邻地水平出现.建议？

<div style='width:30%; text-align:center; float:left; clear:both;'> 是我现在拥有的.

Answer 1

您可以使用具有float: left;属性的div,这些div 将使它们彼此相邻地水平显示,但是您可能需要对以下元素使用清除以确保它们不重叠.

Answer 2

您可以使用

.floatybox {
     display: inline-block;
     width: 123px;
}

如果您只需要支持支持内联块的浏览器.内联块可以具有宽度,但是内联,如按钮元素.

哦,你可能会在元素上添加vertical-align:top以确保排列

Answer 3

我的答案:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

为什么？

从技术上讲,Span是一个内联元素,但是它可以有宽度,你只需要将它们的display属性设置为阻塞.但是,在这种情况下,div可能更合适,因为我猜你想要用内容填充这些div.

你绝对不想做的一件事就是clear:both设置div.设置它会意味着浏览器不允许任何元素与它们位于同一行.结果,你的元素将叠加起来.

注意,使用display:inline.这涉及ie6保证金倍增错误.如有必要,您可以通过其他方式解决此问题,例如条件样式表.

我添加了一个包装器(#whatever),因为我猜这些不是页面上的唯一元素,所以你几乎肯定需要将它们与其他页面元素分开.

无论如何,我希望这对你有所帮助.