我怎样才能像结构一样对齐HTML div？ [英] How can I align HTML divs in a row like structure?

问题描述

我试图在水平行结构中对齐一些div。有一个div 容器，它有子div，这些子div应该在同一行。可以有许多像这样的容器div，具有不同的id但是具有相同的类名。

我该怎么做？这是我尝试过的jsFiddle： http://jsfiddle.net/unix_user/VSd6Y/6/。 使用 display：inline-block 。 这样，您的 div 将堆叠在一起和，您可以指定宽度和块的其他共同属性元素。

查看更新的小提琴。您可以看到，使用 container 样式的 div 分别位于不同的行上，但子< div s堆叠在一起。

I am trying to align some divs in a horizontal row structure. There is a div container which has child divs, and these child divs should be in the same row. There can be many container divs like these, having different ids but the same class name.

How can I do that? Here is the jsFiddle I attempted: http://jsfiddle.net/unix_user/VSd6Y/6/.

解决方案

Use display:inline-block. This way your div will stack up next to each other and you are able to specify widths and other attributes common to block elements.

Check out the updated fiddle. You can see that the divs styled with container are on separate lines, but the child divs are stacked next to each other.

这篇关于我怎样才能像结构一样对齐HTML div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！