html - CSS定位在元素的底部而不使用绝对

Question

我的问题有解决方案，但我想知道是否有更好的解决方案。

我想将 << 和 >> 导航按钮放在网页中某个部分的底部，以便它们始终位于同一位置，而不管页面的内容如何。在这些按钮之间，将有一个链接列表。

这是一个jsFiddle它显示了布局。 jsFiddle 中使用的 HTML 的相关部分如下所示。

<div class="foot">
    <div class="back sink">
      <span>&lt;&lt;</span>
    </div>
    <ul class="menu">
        <li>Chapter 1</li>
        <li>Chapter 2</li>
        <li>Chapter 3 which happens to have a long title that wraps to the next line if you make the window narrow</li>
    </ul>
    <div class="next sink">
      <span>&gt;&gt;</span>
    </div>
</div>

我尝试的第一个 CSS 是这样的:

.foot {
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.foot div {
    display: inline-block;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    flex-basis: 0;
    flex-grow: 1;
}

.sink span {
    position: absolute;
    bottom: 0;
    font-size: 2em;
}

.next span {
    right: 0;
}

但是，如果我使用 position: absolute将 << 和 >> 箭头放在各自 <div> 的底部s，然后是他们的 parent <div> s 没有宽度，因此它们之间的文本很可能会与它们重叠，这并不好。

我目前的解决方案是使用 flex 盒和空垫片 <div> , 将箭头向下推到底部:

<div class="foot">
    <div class="back sink">
        <div class="spacer"></div>
        <span>&lt;&lt;</span>
    </div>
    <ul class="menu">
        <li>Chapter 1</li>
        <li>Chapter 2</li>
        <li>Chapter 3 which happens to have a long title that wraps to the next line if you make the window narrow</li>
    </ul>
    <div class="next sink">
        <div class="spacer"></div>
        <span>&gt;&gt;</span>
    </div>
</div>

这是 CSS 的修改部分...

div.sink {
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: #fcc;
}
.spacer {
    flex-basis: 0;
    flex-grow: 1;
}

... 和一个 jsFiddle来说明结果。

我的问题是:是否有更标准的解决方案，它也适用于不支持 flex 的浏览器？ ？

Answer 1

您可以使用 CSS 表格。

.foot {
  display: table; /* Table layout */
  table-layout: fixed; /* Use fast and reliable algorithm */
}
.sink, .menu {
  display: table-cell; /* Like `flex-direction: row` for the parent */
  vertical-align: bottom; /* Like `align-items: flex-end` in a column */
}
.menu {
  width: 100%; /* Like `flex-grow: 1` */
}

html, body {
  height: 100%;
  margin: 0;
  text-align: center;
}
main {
  height: 100%;
  background: #cfc;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.expand {
  background: #ccf;
  flex: 1;
}
.foot {
  display: table; /* Table layout */
  table-layout: fixed; /* Use fast and reliable algorithm */
}
.sink, .menu {
  display: table-cell; /* Like `flex-direction: row` */
  vertical-align: bottom; /* Like `align-items: flex-end` in a column */
}
.menu {
  width: 100%; /* Like `flex-grow: 1` */
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.sink {
  font-size: 2em;
}

<main>
  <div class="expand"></div>
  <div class="foot">
    <div class="back sink">&lt;&lt;</div>
    <ul class="menu">
      <li>Chapter 1</li>
      <li>Chapter 2</li>
      <li>Chapter 3 which happens to have a long title that wraps to the next line if you make the window narrow</li>
    </ul>
    <div class="next sink">&gt;&gt;</div>
  </div>
</main>