将Div块对齐在容器中

Question

我目前正在设计一个仪表板，我正在寻找一种好的/正确的方法来对齐容器中的多个div。我希望div使用右边距左右占据最大空间。

<div class="wrapper">
  <div class="container">
    <div class="1"></div>
    <div class="2"></div>
    <div class="3"></div>
    <div class="4"></div>
  </div>
</div>


.container {
  margin: 15px;
}

实现这一目标的最佳方法是什么？

Answer 1

查看这个JSFiddle：http://jsfiddle.net/4Y3jS/3/你应该在container类上设置一个特定的宽度，然后浮动每个内部div。

HTML：

<div class="container">
  <div class="box-1"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
  <div class="box-2"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
  <div class="box-3"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
  <div class="box-4"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
</div>

CSS：

.container {
  width: 300px;
}

.box-1, .box-2, .box-3, .box-4 {
  float: left;
  padding: 0 2px;
}

Answer 2

尝试以下方法： JSFiddle 基本上浮动块并让它们的宽度由父母的百分比决定（因为有4个因此高达25％ - 通知我只使用了23％然后我在所有块周围放置了1％的边距，给你2％的空间任意两个区块之间 - 根据需要调整这些数字。）

.container {
    margin: 15px;
}
.box {
    float: left; 
    width: 23%; 
    margin: 0 1%;
}

<div class="container">
    <div class="1 box"></div>
    <div class="2 box"></div>
    <div class="3 box"></div>
    <div class="4 box"></div>
</div>

如果您不希望框之间有空格，这种方法确实很有用 - 使用width:25%; margin: 0;

或者，您可以使用 display: inline-block;

<div class="wrapper">
  <div class="container">
    <div class="1 box"></div><!--
    --><div class="2 box"></div><!--
    --><div class="3 box"></div><!--
    --><div class="4 box"></div>
  </div>
</div>

.box {
    display: inline-block;
    width: 25%; 
    margin: 0;
}

Answer 3

最简单的方法是使用display和表格布局属性： http://jsfiddle.net/3Q4qv/

.wrapper {
    border:solid;
    display:table;
    border-collapse:separate;
    border-spacing:15px;
/* give it width if you wish */
}
.container {
    display:table-row;
}
.container > div {
    display:table-cell;
    border:solid;
    /* let's give a min size since it is empty */
    height:2em;
    min-width:2em;
}

你甚至可以使用填充和边框间距进行混合：http://jsfiddle.net/3Q4qv/1/

.wrapper {
    border:solid;
    display:table;
    border-collapse:separate;
    border-spacing:5px;
    padding:10px;
}

Answer 4

在容器中使用任何宽度，如：

.container {
    width: 400px;
}

然后你可以为里面的所有元素设置样式。看看如果要在元素上添加边框，请尝试使用box-sizing属性。

.box {
    width: 21%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin: 0 2%;
}