Question

所以我在全宽容器中有两个div，我想用flexbox给出变量大小，但不管我做什么，底部都有一个恼人的偏移量。使用边距我可以接近解决问题，但它永远不会完美。

如果你运行下面的代码片段并滚动到底部你可以看到它，图像和黑色内容容器没有在底部对齐。

发生了什么？

＆＃13;

Person.forge()
  .fetchAll({
      withRelated: [{
       cars: function(qb) {
          qb.where({make: 'Rover'})
       }
    }]
  })
  .then(function(persons) {
     //do something
  });

＆＃13;

#container {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
}

#image-wrapper {
    flex-grow: 3;
    max-width: 1000px;
    position: relative;
    /*background-color: black;*/
}

#menu {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background-color: #101010;
    color: #fefefe;
    align-items: stretch;
    display: flex;
    margin-bottom:7px;
}

#form {
    width: 100px;
}

#image {
    width: 100%;
}

＆＃13;

Answer 1

图像下方有一些空间，因为图像是内联元素，因此在（不可见）基线下方保留一些空间，使图像垂直对齐。为避免这种情况，有两种可能的解决方案：

1。）将display: block;应用于图像（请参阅第一个片段）

或

2。）将font-size: 0应用于图像容器（请参阅第二个片段）

#container {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
}

#image-wrapper {
  flex-grow: 3;
  max-width: 1000px;
  position: relative;
  /*background-color: black;*/
}

img {
  display: block;
}

#menu {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background-color: #101010;
  color: #fefefe;
  align-items: stretch;
  display: flex;
}

#form {
  width: 100px;
}

#image {
  width: 100%;
}

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>

    </div>
  </div>

</div>

第二个解决方案：

#container {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
}

#image-wrapper {
  flex-grow: 3;
  max-width: 1000px;
  position: relative;
  /*background-color: black;*/
  font-size: 0;
}

#menu {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background-color: #101010;
  color: #fefefe;
  align-items: stretch;
  display: flex;
}

#form {
  width: 100px;
}

#image {
  width: 100%;
}

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>

    </div>
  </div>

</div>

Answer 2

#container {
      width: 100%;
      display: inline-flex;
      flex-direction: row;
    }

    #image-wrapper {
      flex-grow: 3;
      max-width: 1000px;
      position: relative;
      /*background-color: black;*/
    }

    #menu {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px;
      background-color: #101010;
      color: #fefefe;
      align-items: stretch;
      display: flex;
      margin-bottom:4px;

    }

    #form {
      width: 100px;
    }

    #image {
      width: 100%;
    }

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>
      
    </div>
  </div>

</container>

看起来边距有点偏差

CSS Flexbox令人烦恼的行元素轻微偏移

2 个答案: