CSS - 如何将 div 并排放置，左右两边没有空格答案

【问题标题】：CSS - How to place div side by side with no space at left and rightCSS - 如何将 div 并排放置，左右两边没有空格
【发布时间】：2015-08-01 02:59:58
【问题描述】：

我有一个带有多个子 div 的父 div，我想让子 div 每行并排浮动 4 个。

浮动规则必须：

每个子 div 的宽度相同。
每行 4 个子 div。
每一行左侧和右侧都必须用包装器（0px/无空格）关闭，如下图。
每个子 div 之间的每一行都必须有一个空格并且大小必须相同，如下图所示。

通过使用 css/css3 可以做到吗？对不起我的英语不好。

【问题讨论】：

标签： html css

【解决方案1】：

使用 CSS3 这相对容易：使用box-sizing: border-box;，子 div 的宽度将包括填充（例如20px）和边框，并且可以设置为主体宽度的 25%。给父 div 包装器一个负的右边距以隐藏最右边的空间。由于有额外的空间，body 上会出现一个滚动条，可以用overflow-x: hidden; 隐藏。

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.wrapper {
  margin-right: -20px;
}
.child {
  box-sizing: border-box;
  width: 25%;
  padding-right: 20px;
  float: left;
}
.child p {
  background: lime;   
}

<p>Content</p>
<div class="wrapper">
  <div class="child"><p>Child</p></div>
  <div class="child"><p>Child</p></div>
  <div class="child"><p>Child</p></div>
  <div class="child"><p>Child</p></div>
</div>
<p>Content</p>

【讨论】：

【解决方案2】：

这里有一些很好的例子，但是我总是想看看一种让我的图像与我的文本对齐的方法。为此，我一直在使用页面包装器和带有负边距的图像包装器（使其与文本不符）。然后在应用相同的值作为正填充值后，图像与文本完美对齐。

#pagewrapper {
    width: 500px;
    background: green;
    overflow: hidden;
}

#imagewrapper {
    width: auto;
    margin: 0 -12px; /* negative margin to keep images aligned with text, same as margin below */
    background: blue;
}

.image {
    box-sizing: border-box;
    width: 25%;
    padding: 0 12px;
    margin: 0;
    height: 200px;
    background: red;
    float: left;
    overflow: hidden;
}

Fiddle

【讨论】：

非常感谢重播，看到这个链接:) http://jsfiddle.net/dzLt8xjj/3/我想删除空间
谢谢朋友！！你解决了我的问题！
这与我的代码完全不同；）。 box-sizing: border-box和width: 25%应该结合起来，否则内部的div会太短，会留下一些空间。

【解决方案3】：

刚刚看到，@user2782378 回答.. 我想我应该通过给出我的回答来详细说明：

div{float:left;width:20%;background:black;height:100px;margin:1px;}

Js fiddle EXAMPLE

学习使用的css：

W3schools

【讨论】：

【解决方案4】：

尝试使用display:inline-block按比例修改子div的宽度

.outer_div{
  display:inline-block;
  max-width:800px;
  height:300px;
  background-color:red;
  overflow:auto;
}
.inner_div{
  width:200px;
  height:100px;
  background-color:black;
  float:left;
}

【讨论】：

【解决方案5】：

也许这种纯 CSS2 解决方案更可取。

div 是一个块元素，默认为页面宽度。如果你给包装器 div 的右边距是内部 div 之间的边距的三倍，那么包装器宽度的 25% 就是内部 div 的宽度。使用相对定位调整内部 div 的位置：

html, body {
    margin: 0;
    padding: 0;
}
.wrapper {
    margin-right: 30px;
}
.wrapper div {
    width: 25%;
    float: left;
    position: relative;
    background: lime; /* demo setting */
    height: 100px;    /* demo setting */
}
.wrapper div+div {
    left: 10px;
}
.wrapper div+div+div {
    left: 20px;
}
.wrapper div+div+div+div {
    left: 30px;
}

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

【讨论】：

【解决方案6】：

试试这个..

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with abality to provide width/height
}

有边距：0 自动；连同 width: 100% 是没用的，因为你的元素会占据整个空间。
float: left 将左侧的元素浮动，直到没有剩余空间，因此它们将换行。使用 display: inline-block 能够内联显示元素，burt 能够提供大小（与忽略宽度/高度的显示内联相比）

Demo

【讨论】：

非常感谢重播，请参阅此链接 :) http://jsfiddle.net/dzLt8xjj/3/。我想删除空间