Html 以仅百分比宽度但固定边距并排显示多个div_Html_Css

Html 以仅百分比宽度但固定边距并排显示多个div

html css

Html 以仅百分比宽度但固定边距并排显示多个div,html,css,Html,Css,我想并排显示多个div标记。当我显示4个div时，每个div的宽度为25%。当我为每个20px的div添加一个左边距时，布局行会中断，因为4x25%+4x20px=100%+80px。那是行不通的框大小属性不考虑边距。我现在能做的是给每个div一个16%的宽度，总共是80%，每个div还有一个余量：5%，总共是20%，所以总共是100%。这应该行得通但是没有更好的办法吗？我只想要两个div之间的固定间隙。是的，你可以做到下面是一个类似的 HTML: <div id="abc">

我想并排显示多个div标记。当我显示4个div时，每个div的宽度为25%。当我为每个20px的div添加一个左边距时，布局行会中断，因为4x25%+4x20px=100%+80px。那是行不通的

框大小属性不考虑边距。

我现在能做的是给每个div一个16%的宽度，总共是80%，每个div还有一个余量：5%，总共是20%，所以总共是100%。这应该行得通

但是没有更好的办法吗？我只想要两个div之间的固定间隙。

是的，你可以做到

下面是一个类似的

HTML:

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

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

希望这有帮助。

我在Stackoverflow上找到了一个与此相关的答案：

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

这种方法的优点是，所有四列的宽度都相等，它们之间的间隙始终为5px*2。

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>

JSFIDLE

它似乎得到了我们十年来的表行为……我们将在下一个十年中反复使用display:table:p

#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*/
}