Question

我想对齐三个块：一个在左下角，一个在中间顶部，一个在右下角。

宽度是固定的，但可能没有一个或两个块。

我找不到使用position:absolute的方法，因为容器必须具有较高块的高度。

到目前为止，我的解决方案是使用三个inline-block，其宽度与容器宽度相加，并且混合vertical-alignment。但是，当我隐藏中间区块时，它会破裂。

我设置了fiddle for it here，显示了我想要的结果，除非我隐藏。

当然我可以在隐藏块时添加一个脚本来设置边距，但我正在寻找一个仅限CSS的解决方案。另外，我不想使用表格或display:table-cell来表示副作用。

Answer 1

您可以使用display:flex; flex:1，margin:auto将远离其应用的方向，在相反的方向上它将居中：

当中间隐藏时，左右会达到宽度的50％。 div的宽度通过flex:1：

＆＃13;

$("input").click(() => {
  $("#middletop").toggle();
})

＆＃13;

div {
  border: 1px solid green;
  margin: 0;
  flex: 1;
}
#container {
  min-height: 50vh;/* demo purpose */
  display: flex;
}
#leftbottom {
  margin-top: auto;
}
#middletop {
  margin: auto 0;
  text-align: middle;
}
#rightbottom {
  width: 200px;
  margin-bottom: auto;
  text-align: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="leftbottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div id="middletop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun.
  </div>
  <div id="rightbottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>
<input type="button" value="Hide middle" />

＆＃13;

https://jsfiddle.net/9b9a7wqv/8/

当中间隐藏时，会留下空隙。 div的宽度通过width设置。

＆＃13;

$("input").click(() => {
  $("#middletop").toggle();
})

＆＃13;

div {
  border: 1px solid green;
  margin: 0;
  }
#container div {
  width:33%;
}

#container {
  min-height: 50vh;
  display: flex;
}

#leftbottom {
  margin-top: auto;
  margin-right:auto;
  ;
}

#middletop {
  margin: auto 0;
  text-align: middle;
}

#rightbottom {
  margin-bottom: auto;
  margin-left:auto;
  text-align: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="leftbottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div id="middletop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun.
  </div>
  <div id="rightbottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>
<input type="button" value="Hide middle" />

＆＃13;

https://jsfiddle.net/9b9a7wqv/10/

如何在可变高度div上混合垂直和水平对齐？

1 个答案: