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

时间:2013-07-01 12:40:06

标签: html css

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

box-sizing属性不考虑边距。

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

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

3 个答案:

答案 0 :(得分:3)

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

JSBIN

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

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

答案 1 :(得分:0)

是的,你可以做到。

以下是类似的 WORKING SOLUTION

HTML:

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

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

希望这有助于。

答案 2 :(得分:0)

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/