Question

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

我想放置＆lt;＆lt;和＆gt;＆gt;网页中某个部分底部的导航按钮，无论页面内容如何，它们始终位于相同的位置。在这些按钮之间，会有一个链接列表。

这是显示布局的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放置＆lt;＆lt;和＆gt;＆gt;它们各自<div>底部的箭头，那么它们的父<div>没有宽度，因此它们之间的文本很可能与它们重叠，这是不好的。

我目前的解决方案是使用弹性框和空间隔<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` */
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这是一种在不使用位置的情况下执行所需操作的方法：绝对或弹性。它依赖于你知道并设置页脚的高度。

JSFiddle

这是CSS：

html, body {
    height: 100%;
    margin: 0;
    text-align: center;
}
main {
    position: relative;
    height: 100%;
    background: #cfc;
}
.expand {
    background: #ccf;
    height:100%;
    margin-bottom:-72px;
}
.foot {
    display:block;
    height:72px;
    background: #cfc;
}
.foot div {
    display: inline-block;
}
ul.menu {
    display:inline-block;
    margin: 0;
    padding: 0;
    width:90%;
    list-style-type: none;
}
div.sink {
    background: #fcc;
    display:inline-block;
    vertical-align:top;
    width:5%;
    height:100%;
    line-height:72px;
}
.back.sink {
    float:left;
}
.next.sink {
    float:right;
}
.spacer {
}

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

2 个答案: