Is that possible to display divs next to each other without floating?
I want to put several divs next to each other in one row. All divs have the same height.
Here is how this can be done using float: left.
Can this be done without using float ?
Depends, on what you want to do.
You can use display: inline-block;
http://jsfiddle.net/sygL9/
You could use display:inline-block. But unfortunately some browsers (some IE versions) don't support it.
http://www.brunildo.org/test/inline-block.html
http://www.quirksmode.org/css/display.html
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)
Another option is to nest them, set them all to position: relative, and use the left rule to align them.
#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
If you have the possibility to change the divs to span elements, that would fix the problem without using CSS
<span></span><span></span><span></span><span></span>
加载中,请稍侯......
精彩评论