1

複数のdivタグを並べて表示したい。4 つの div を表示すると、各 div の幅は 25% になります。4x25% + 4 x 20px = 100% + 80px であるため、20px の各 div に左マージンを追加すると、レイアウトの改行が発生します。それはうまくいきません。

box-sizing プロパティは余白を考慮しません。

私が今できることは、各 div の幅を 16% (合計で 80%) にし、すべての div に margin-left:5% (合計で 20%) を設定して、合計で 100% にすることです。それはうまくいくはずです。

しかし、より良い方法はありませんか？div 間のギャップを固定したいだけです。

4

3 に答える 3

3

これで動作するStackoverflowに関する回答を見つけました：

JSBIN

style="width: 25%; float:left;" を持つ div で 4 つの色付き div のそれぞれをラップします。

このアプローチの利点は、4 つの列すべての幅が等しくなり、それらの間のギャップが常に 5px * 2 になることです。

于 2013-07-01T12:47:40.957 に答える
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;
}

お役に立てれば。

于 2013-07-01T12:46:11.587 に答える
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/

于 2013-07-01T13:31:00.713 に答える