Question

我希望一个<div>位于顶部，三个位于中间，一个位于底部而没有剩余空格。我无法移除中间<div>和底部之间的空间。

顶部和底部的高度为15％;而中间的则有70％。最下面一个略微超出.container。

这是<body>标记。

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

这是css风格。

    #wrap{
        width: 90%;
        height: 500px;
        margin: 0 auto;
        border: 4px solid black;}

    .container{
        width: 93.75%;
        height: 492px;
        margin: 0 auto;
        border: 4px solid black;}

    .container div{
        /*display: block;*/
        height: 100%;}

    .container div:first-child{
        height: 15%;
        background: #003153;}

    .container div:first-child +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #c33;}

    .container div:first-child +div +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #2dcc70;}

    .container div:first-child +div +div +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #e75d5d;}

    .container div:first-child +div +div +div +div{
        /*display: block;*/
        height: 15%;
        background: #003153;}

我是否必须通过修改display:或其他内容来解决这个问题？

Answer 1

将vertical-align: top与display: inline-block一起使用。默认值为baseline。

来自Documentation：

baseline ：将元素的基线与其父级的基线对齐。

＆＃13;

#wrap{
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 4px solid black;}

.container{
  width: 93.75%;
  height: 492px;
  margin: 0 auto;
  border: 4px solid black;}

.container div{
  /*display: block;*/
  height: 100%;}

.container div:first-child{
  height: 15%;
  background: #003153;}

.container div:first-child +div{
  display: inline-block;
  vertical-align: top;
  width: 33.33333333333333333%;
  height: 70%;
  background: #c33;
}

.container div:first-child +div +div{
  display: inline-block;
  vertical-align: top;
  width: 33.33333333333333333%;
  height: 70%;
  background: #2dcc70;}

.container div:first-child +div +div +div{
  display: inline-block;
  vertical-align: top;
  width: 33.33333333333333333%;
  height: 70%;
  background: #e75d5d;}

.container div:first-child +div +div +div +div{
  /*display: block;*/
  height: 15%;
  background: #003153;}

＆＃13;

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

＆＃13;

Answer 2

这是工作代码 -

＆＃13;

      #wrap{
        width: 90%;
        height: 500px;
        margin: 0 auto;
        border: 4px solid black;}

    .container{
        width: 93.75%;
        height: 492px;
        margin: 0 auto;
        border: 4px solid black;}

    .container div{
      vertical-align: top;
        /*display: block;*/
        height: 100%;}

    .container div:first-child{
        height: 15%;
        background: #003153;}

    .container div:first-child +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #c33;}

    .container div:first-child +div +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #2dcc70;}

    .container div:first-child +div +div +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #e75d5d;}

    .container div:first-child +div +div +div +div{
        /*display: block;*/
        height: 15%;
        background: #003153;}

＆＃13;

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

＆＃13;

如何摆脱<div> s之间的空间？

2 个答案: