如何解决是否可以将div彼此相邻放置并居中?
| 我正在动态生成更多的div(具有相同内容的相同大小的div),并且我希望它们并排放置并居中。 例: 假设一行上可以有4个div,我希望它看起来像这样: 1格:...[]...
2格:..[][]..
3格:.[][][].
4格:[][][][]
5格:
[][][][]
...[]...
这可能吗?
我知道您可以用float:left
将多个div放在一行中(并让它们包裹起来),并用width: 100%
将一个外部容器放在其中
在这里测试:http://jsfiddle.net/Tyilo/cD7e3/1/
解决方法
当然可以:
http://jsfiddle.net/pRNgH/
我包括了使ѭ6在IE6 / 7中工作所需的技巧,以了解更多信息:
内联块在Internet Explorer 7、6中不起作用
您需要确保不要在8个字符之间输出空格,否则会发生这种情况。
CSS:
.divHolder {
width: 400px;
border: 2px solid red;
margin: 0 0 16px 0;
text-align: center
}
.dynamic {
text-align: left;
width: 100px;
height: 50px;
background: #ccc;
display: inline-block;
/* make it work in ie7 */
*display: inline;
zoom: 1
}
HTML:
<div class=\"divHolder\">
<div class=\"dynamic\">2</div><div class=\"dynamic\">2</div>
</div>
, 您需要将所有div放在包装的div中,并使用text-align:center;对于包装div。
编辑:检查马蒂的评论,他是对的。您还需要执行display:inline-block;用于内部div。
, 根据您的评论进行了修订:
如果要动态创建它们,那么为什么不能这样做:
parent width = totaldivs * div width;
parent margin: 0 auto;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。