Question

是否可以将一组div放在一个div中，这样看起来像这样？

http://oi49.tinypic.com/1yo2dh.jpg

我想知道你是否可以在不使用桌子的情况下做到这一点。

现在我得到了这个HTML：

<nav class="imagemenu">
    <div id="categories">
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>    
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>         
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
    </div>
</nav>

这个CSS：

.home-menu {
    width:780px;
    height: 340px;
    margin-top:10px;
    padding: 20px;
    background-color:#CCC;
}

#categories {
    width:740px;
    height:340px;
    margin:0 auto;
    background-color:#333;
}

.cata {
    width:150px;
    height:100px;
    margin-bottom: 20px;
    float:left;
    background-color:#FFF;
    opacity:0.5;
}
.cata {
    opacity:1.0;
}

尺寸仍然取决于但是是否有可能轻松将所有cata放在类别div中？

我从其他相关问题中尝试了一些选项，例如overflow和text-align:center，也许我使用它们是错误的，但它们不起作用。

Answer 1

您可以添加text-align：

#categories {
    […]
    text-align:center;
}

和display: inline-block，您必须从此CSS规则中删除float：

.cata{
    […]
    display:inline-block;
}

<强>演示

http://jsfiddle.net/EdHS9/

Answer 2

是的，这是可能的。

您需要做的只是制作div元素inline-block，以便他们像内联元素一样回复text-align:center。

这是一个小提琴演示。

http://jsfiddle.net/

将div中的一组div放在一个div中

2 个答案: