对齐容器中的 div 块答案

【问题标题】：Aligning Div Blocks in a container对齐容器中的 div 块
【发布时间】：2014-07-19 04:20:03
【问题描述】：

我目前正在设计一个仪表板，我正在寻找一种好的/正确的方法来对齐容器中的多个 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;
}

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

【问题讨论】：

horizontally aligning divs 的可能重复项
我不清楚你的问题。您想通过积木占用更多空间吗？
看不懂downvote，问题显然不是重复的。

标签： html css responsive-design

【解决方案1】：

最简单的方法是使用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;
}

【讨论】：

正是我想要的。谢谢你。使用 min-width 有什么好处？
除非您将table-layout: 设置为fixed;，否则表格内没有，如果指定width，则不允许单元格扩展:)

【解决方案2】：

查看这个 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;
}

【讨论】：

在您的示例中，我无法在容器上添加边框。

【解决方案3】：

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

.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%;
}

【讨论】：

【解决方案4】：

试试这样的：JSFiddle 基本上浮动块并让它们的宽度由父级的百分比确定（最多 25%，因为有 4 个 - 请注意我只使用了 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;
}

【讨论】：

感谢这个观点，从来没有想过这样的方式。