Question

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

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

Answer 1

您可以使用具有float: left;属性的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。

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

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

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

无论如何，我希望这有帮助。

Answer 4

你可以这样做：

<div style="float: left;"></div>

或

<div style="display: inline;"></div>

任何一个都会导致div水平平铺。

Answer 5

我会这样做，因为它可以为你提供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">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

Answer 6

您可能想要做的是查找基于CSS网格的布局。此布局方法涉及指定一些CSS类以将页面内容与网格结构对齐。与基于网络的布局相比，它与打印布局更紧密相关，但它是许多网站上使用的一种技术，可以将内容布局到结构中而无需借助表格。

试试Smashing Magazine的starters。

Answer 7

我会用：

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

这是我第一次使用此代码工具＆＃39;从溢出......但是现在应该做...

Answer 8

查看css Float属性。 http://w3schools.com/css/pr_class_float.asp

它适用于像div这样的块元素。另外，如果你真的试图显示一些信息表，那么你想要显示的是什么，表格并不邪恶。

Answer 9

我会尝试向他们提供所有display: block;属性并使用float: left;。

然后，您可以根据需要设置width和/或height。您甚至可以指定一些垂直对齐规则。

Answer 10

    <!-- 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％不是它们所使用的。对不起，英语不好：）

如何水平对齐跨距或div？

10 个答案:

我的回答：

为什么？