CSS-如何将div并排放置，左右之间没有空格

Question

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

浮动规则必须：

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

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

Answer 1

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

Answer 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;
}

小提琴

Answer 3

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

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

小提琴的例子

为了研究使用的css：

W3Schools的

Answer 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;
}

Answer 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> 

Answer 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自动； 以及宽度：100％是无用的，因为您的元素会占用全部空间。

• float：left将元素左移，直到没有空间，因此它们将换行。 使用display：inline-block可以内联显示元素，并提供尺寸（可忽略宽度/高度的内联显示）

演示