并排显示多个div，只有百分比宽度但是固定边距

I want to display multiple div-tags side by side. When I display 4 divs then each div has a width of 25%. When I add a left-margin to each div of 20px the layout linebreaks because 4x25% + 4 x 20px = 100% + 80px. That will not work.

我想并排显示多个div标签。当我显示4个div时,每个div的宽度为25%。当我为每个20px的div添加左边距时,布局换行符因为4x25%+ 4 x 20px = 100%+ 80px。这是行不通的。

The box-sizing property does not consider the margin.

box-sizing属性不考虑边距。

What I can do now is give each div a width of 16% which is 80% in total and every div also has a margin-left:5% which is 20% in total so its 100% all together. That should work.

我现在可以做的是给每个div宽度为16%,总共为80%,每个div也有一个余量 - 左:5%,总共20%所以100%全部在一起。这应该工作。

But is there no better way? I just want fixed gaps between my divs.

但是没有更好的方法吗?我只想在我的div之间找到固定的差距。

3 个解决方案

#1

I found an answer on * that works with this:

我在*上找到了一个适用于此的答案:

JSBIN

wrap each of the four colored divs in a div that has style="width: 25%; float:left;"

将一个四个彩色div中的每一个包裹在一个div中,该div具有style =“width:25%; float:left;”

The advantage with this approach is that all four columns will have equal width and the gap between them will always be 5px * 2.

这种方法的优点是所有四列的宽度相等,它们之间的间隙总是5px * 2。

#2

Yes you can do it.

是的,你可以做到。

Here is a similar WORKING SOLUTION

这是一个类似的工作解决方案

The HTML:

<div id="abc">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

The CSS:

#abc {
height: 125px;
text-align: justify;
border: 10px solid black;
font-size: 0.1px; /* IE 9 & 10 don't like font-size: 0; */
min-width: 600px;
}
#abc div {
width: 150px;
height: 125px;
display: inline-block;
background: red;
}
#abc:after {
content: '';
width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}

Hope this Helps.

希望这可以帮助。

#3

HTML

<body>
  <div id="wrapper">
    <div id="wrapper_2">
        <div id="child">&nbsp;</div>
    </div>
    <div id="wrapper_2">
        <div id="child">&nbsp;</div>
    </div>
    <div id="wrapper_2">
        <div id="child">&nbsp;</div>
    </div>
    <div id="wrapper_2">
        <div id="child">&nbsp;</div>
    </div>
  </div>
</body>

CSS

#wrapper {
  display:table;
  width:100%;
}
#wrapper_2 {
  display:inline-block;
  width:25%; /* Number of element you want (here 100/4) */
}
#child {
  display:block;
  background-color:red;
  width:80%; /* Size of the element (100% => full cell) */
  margin: 0 auto; /* center the element in the table cell*/
}

JSFIDDLE

http://jsfiddle.net/hJPBz/

#1