Question

我目前想要创建一个页面，其中我有一个包含两列的div。一列用于导航，右列用于内容。

现在，在右栏中，我想在右下方显示一些操作按钮，我希望它始终位于右下方。但是，它可以是左列的高度比右列高，反之亦然，但两个盒子的高度（flex）应始终相同，动作按钮应始终位于右下角。

这是HTML和CSS的示例（Codepen： https://codepen.io/anon/pen/eyRrwx）

<div class="content">
  <div class="left">
    <ul>
      <li>These items are dynamic
      <li>meaning there can be a number of N of them
    </ul>
  </div>
  <div class="right">
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT
    <div style="position: absolute; bottom: 10px; right: 0px;">
      <button>TEST</button>
    </div>
  </div>
</div>

.content {
  display: flex;
}
.left {
  width: 25%;
  background-color: #d3d3d3;
  float: left;
  position: relative;
}
.left li {
  height: 50px;
}
.right {
  position: relative;
  width: 25%;
  background-color: #a9a9a9;
  float: left;
}

正如你所看到的，我有两列，相同的高度，左边的一个更长，所以右边的列通过flex等变得更大。

我现在遇到的问题如下。如果右栏的文字多于左栏，我有这个问题：

<div class="content">
  <div class="left">
    <ul>
      <li>These items are dynamic
      <li>meaning there can be a number of N of them
    </ul>
  </div>
  <div class="right">
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
    <div style="position: absolute; bottom: 10px; right: 0px;">
      <button>TEST</button>
    </div>
  </div>
</div>

.content {
  display: flex;
}
.left {
  width: 25%;
  background-color: #d3d3d3;
  float: left;
  position: relative;
}
.left li {
  height: 50px;
}
.right {
  position: relative;
  width: 25%;
  background-color: #a9a9a9;
  float: left;
}

或作为Codepen https://codepen.io/anon/pen/goRKpx

正如您所看到的，文本超出了按钮。是否有可能始终将操作按钮对齐在右下角，但是对于上面的文本总是有最小边距？

Answer 1

将flexbox应用于.right div，然后将margin-top设置为按钮包装div上的auto，无论内容高度如何，它都将始终位于右侧div的底部。< / p>

.content {
  display: flex;
}

.left {
  background-color: #d3d3d3;
  float: left;
  position: relative;
}

.left li {
  height: 50px;
}

.right {
  display: flex;
  flex-direction: column;
  background-color: #a9a9a9;
}

.button-wrap {
  margin: 1em;
  margin-top: auto;
  text-align: right;
}

<div class="content">
  <div class="left">
    <ul>
      <li>These items are dynamic
        <li>meaning there can be a number of N of them
    </ul>
  </div>
  <div class="right">
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>

    <div class="button-wrap">
      <button>TEST</button>
    </div>
  </div>
</div>

内容较短：

.content {
  display: flex;
}

.left {
  background-color: #d3d3d3;
  position: relative;
}

.left li {
  height: 50px;
}

.right {
  display: flex;
  flex-direction: column;
  background-color: #a9a9a9;
}

.button-wrap {
  margin: 1em;
  margin-top: auto;
  text-align: right;
}

<div class="content">
  <div class="left">
    <ul>
      <li>These items are dynamic
        <li>meaning there can be a number of N of them
    </ul>
  </div>
  <div class="right">
    THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>


    <div class="button-wrap">
      <button>TEST</button>
    </div>
  </div>
</div>

始终将div放在右下角的div内，并保留最小边距

1 个答案: