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

时间:2017-02-07 05:45:04

标签: html css

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

enter image description here

顶部和底部的高度为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:或其他内容来解决这个问题?

2 个答案:

答案 0 :(得分:4)

vertical-align: topdisplay: inline-block一起使用。默认值为baseline

来自Documentation

  

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

这是工作代码 -

&#13;
&#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;
&#13;
&#13;