我唯一的问题是让它们三排并有相等的间距。显然，span 不能有宽度，并且 div（以及带有 display:block 的 span）不会水平相邻出现。有什么建议吗？
<div style='width:30%; text-align:center; float:left; clear:both;'>是我现在拥有的。
【问题讨论】：
您可以将 div 与 float: left; 属性一起使用，这将使它们彼此水平显示，但是您可能需要对以下元素使用清除以确保它们不重叠。
【讨论】：
overflow: hidden即可。见：stackoverflow.com/questions/323599/…
padding-left，它会被忽略。
<div style="display: in-line"></div><div style="display: in-line"></div> 应该可以正常工作。
overflow: hidden 是最好的解决方案。
查看css Float 属性。 http://w3schools.com/css/pr_class_float.asp
它适用于像 div 这样的块元素。或者，你想显示什么，如果你真的想显示一些信息的表格，表格并不是邪恶的。
【讨论】：
您可能想做的是查找基于 CSS 网格的布局。此布局方法涉及指定一些 CSS 类以将页面内容与网格结构对齐。与基于 Web 的布局相比，它与基于印刷的布局更密切相关，但它是许多网站上使用的一种技术，用于将内容布局到结构中，而无需借助表格。
试试这个来自 Smashing Magazine 的 starters。
【讨论】：
你可以这样做：
<div style="float: left;"></div>
或
<div style="display: inline;"></div>
任何一个都会导致 div 水平平铺。
【讨论】：
你可以使用
.floatybox {
display: inline-block;
width: 123px;
}
如果您只需要支持支持内联块的浏览器。内联块可以有宽度，但是是内联的，就像按钮元素一样。
哦，您可能需要在元素上添加 vertical-align: top 以确保对齐
【讨论】：
我会尝试给他们所有display: block; 属性并使用float: left;。
然后您可以根据需要设置width 和/或height。您甚至可以指定一些垂直对齐规则。
【讨论】：
<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 属性设置为 block。然而，在这种情况下，一个 div 可能更合适，因为我猜你想用内容填充这些 div。
您绝对不想做的一件事是在 div 上设置 clear:both。像这样设置它意味着浏览器将不允许任何元素与它们位于同一行。结果，你的元素会堆积起来。
注意，使用display:inline。这处理 ie6 边距加倍错误。如有必要，您可以通过其他方式解决此问题，例如条件样式表。
我已经添加了一个包装器 (#whatever)，因为我猜这些不会是页面上唯一的元素，因此您几乎肯定需要将它们与其他页面元素分开。
无论如何，我希望这会有所帮助。
【讨论】：
我会这样做，因为它会为您提供 3 个均匀大小的列、均匀的间距和（均匀）比例。 注意：这未经测试，因此可能需要针对旧版浏览器进行调整。
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
【讨论】：
我会使用：
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
这是我第一次从溢出中使用这个“代码工具”......但现在应该这样做......
【讨论】：
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
另一个...
尝试使用float: left; 或right;，将width 更改为其他值...它应该可以工作...还请注意，div 没有使用它们之间的 10%...抱歉英语不好:)
【讨论】：