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>

Answer 3

现场示例在这里：http://jsfiddle.net/gLxr3cqk/1/

＆＃13;

#container {
  text-align: justify;
}
#container > div {
  width: 100px; /* Declare your value. Can be in relative units. */
  height: 100px;
  display: inline-block;
  vertical-align: top;
  border: 1px black solid;

  /* IE fix. */
  *display: inline;
  zoom: 1;
}
#container:after {
  content: "";
  width: 100%;
  display: inline-block;
}

＆＃13;

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

＆＃13;

如何证明一行中有4个div

3 个答案: