如何证明一行中有4个div

Question

我有HTML/CSS布局问题:

我有4个具有相同宽度和高度的div.我想"为他们辩护",所以应该从一侧到另一侧放置它们之间相同的空间.换句话说:假设A,B,C,D是div和"|" 表示行的开始/结束.所以我希望在一行中获得3个div的效果:

|A    B    C    D|

怎么做.我能用3个div来做,但如何用4个div做到这一点？

Answer 1

要获得完整的浏览器支持,您可以使用以下内容:

#container {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    width:100%;
}
#container>div {
    width: 100px;
    height: 100px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    background:red;
}
span {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div> <span></span>
</div>

Answer 2

使用灵活的盒子:

#wrapper {
  display: flex;
  justify-content: space-between;
}

#wrapper {
  display: flex;
  justify-content: space-between;
}

<div id="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>