Question

我在已知大小的容器内有多个已知大小的蓝色div（180 x 180 px）。

enter image description here

<html>
    <head>
        <style>
            @import url('http://getbootstrap.com/dist/css/bootstrap.css');

            .content {
                border:1px solid black;
                background-color: grey;
                overflow:hidden;
                text-align:center;
            }

            .block {
                width: 180px;
                height: 180px;
                border: 1px solid black;
                background-color:blue;
                margin: 0 5px 5px 0;
                float:left;
            }
        </style>
    </head>

    <body>
        <div class="row">
            <div class="col-md-6">
                <div class="content">
                    <div class="block"></div>
                    <div class="block"></div>              
                    <div class="block"></div>
                    <div class="block"></div> 
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
            </div>
        </div>
    </body>
</html>

这是我的fiddle。

我想知道两种方法将这些蓝框对中。

首先：

enter image description here

第二

enter image description here

Answer 1

只需在块元素上使用inline-block。

.block {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    background-color:blue;
    margin: 0 5px 5px 0;
    display:inline-block;
}

http://jsfiddle.net/52VtD/7656/

Answer 2

出于某种原因，我可以添加编辑过的小提琴。所以这里是代码：

HTML：

<div class="row">
    <div class="col-md-12">
      <div class="content">
          <div class="box">
          <div class="block"></div>
          <div class="block"></div>              
          <div class="block"></div>
          <div class="block"></div> 
          <div class="block"></div>
          <div class="block"></div>
          <div class="block"></div>
      </div>
      </div>
    </div>
</div>

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.content {
  border:1px solid black;
  background-color: grey;
  overflow:hidden;
  text-align:center;
  margin-left:10px;
}

.box {
    width:555px;
    margin:0 auto;
}

.block {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    background-color:blue;
    margin: 0 5px 5px 0;
    display:inline-block;
    float:left;
}

Answer 3

首先使用这个小提琴：

http://jsfiddle.net/52VtD/7656/

我创建了另一个div，因此块居中。块的样式现在是：

.block {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    background-color:blue;
    margin: 0 5px 5px 0;
    display:inline-block;
    float:left;
}

我添加的div的样式（类名是＆＃34; box＆＃34;）是：

.box {
    width:555px;
    margin:0 auto;
}

将多个DIV集中在未知大小的容器中

3 个答案: