是否可以在不浮动的情况下显示彼此相邻的div？

I want to put several divs next to each other in one row. All divs have the same height.

我想把几个div放在一行中。所有div都有相同的高度。

Here is how this can be done using float: left.

以下是使用float：left的方法。

Can this be done without using float ?

这可以不使用浮点数完成吗？

5 个解决方案

#1

Depends, on what you want to do. You can use display: inline-block;

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

http://jsfiddle.net/sygL9/

#2

You could use display:inline-block. But unfortunately some browsers (some IE versions) don't support it.

您可以使用display：inline-block。但不幸的是，有些浏览器（某些IE版本）不支持它。

http://www.brunildo.org/test/inline-block.html

http://www.quirksmode.org/css/display.html

#3

a display: block element is (effectively) going to have a line break at the end. One option that will let you keep block element styles, while putting it in the pageflow is set display: inline-block (of course, with some additional work to get ie behaving)

显示：块元素（有效地）在末尾有一个换行符。一个选项可以让你保持块元素样式，同时将它放在页面流中设置display：inline-block（当然，还有一些额外的工作来获得即表现）

Another option is to nest them, set them all to position: relative, and use the left rule to align them.

另一种选择是嵌套它们，将它们全部设置为position：relative，并使用左规则对齐它们。

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

Here you are, with seven divs in a row

你在这里，连续七个div

#5

If you have the possibility to change the divs to span elements, that would fix the problem without using CSS

如果您可以将div更改为span元素，那么可以在不使用CSS的情况下解决问题

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

#1