不使用浮动，是否可能将div并排显示？

Question

我希望将多个 div 元素放在同一行，且它们的高度相等。

这里 展示了使用 float: left 实现该效果的方法。

是否可以不使用 float 来实现该效果？

- Misha Moroshko

---

请原谅我的潜在无知，但在这种情况下难道不应该使用“span”吗？ - PurplePilot

对我不起作用：http://jsfiddle.net/fnbVZ/1/ - Misha Moroshko

Answer 1

这取决于你想做什么。 你可以使用 display: inline-block;

http://jsfiddle.net/sygL9/

- user196106

---

我之前不知道可以将容器的 font-size 设置为 0。非常感谢！ - Misha Moroshko

Answer 2

你可以使用display:inline-block，但是不幸的是一些浏览器（如某些IE版本）不支持它。 http://www.brunildo.org/test/inline-block.html http://www.quirksmode.org/css/display.html

- Palantir

---

在IE浏览器中，触发“hasLayout”和设置"display:inline"可以达到相同的效果。不过这是一种hack方法。 - Matt Briggs

Answer 3

一个 display: block 元素（实际上）在结尾会有一个换行符。一个让你保留块级元素样式，同时将其放入页面流中的选项是设置 display: inline-block （当然，需要一些额外的工作来使IE表现正常）。

另一个选项是将它们嵌套起来，将它们全部设置为 position: relative，并使用 left 规则来对齐它们。

- Matt Briggs

Answer 4

#together {
    position: absolute;
    display: inline-block;
 margin;left:10px;
 background-color:lightblue;
 width:500px;
 border:4px double blue;
}

<div id="together" style="left:10px">first div</div>
<div id="together" style="left:520px">second div</div>
<div id="together" style="left:1030px">third div</div>
<div id="together" style="left:1540px">fourth div</div>
<div id="together" style="left:2050px">fifth div</div>
<div id="together" style="left:2560px">sixth div</div>
<div id="together" style="left:3070px">seventh div</div>

在这里，您有七个并排的 div。

- Peter

---

同一个ID用于多个元素？！ID应该是唯一的。 - Lee Taylor

Answer 5

如果你有可能将div元素改为元素，那么就可以解决这个问题，而无需使用CSS。

 <span></span><span></span><span></span><span></span>

- bonzi