Question

我有这个样本：

代码HTML：

<div class="row">
                <div class="col-md-push-8 col-md-4 small-menu">
                    <a href="#" class="orange-menu">List your Property</a>
                    <ul class="list-inline">
                        <li><a href="#">Travelor Login</a></li>
                        <li><a href="#">Owner Login</a></li>
                    </ul>
                </div>
            </div>

CODE CSS：

.small-menu .orange-menu {
      background: #ed7103;
    font-size: 18px;
    padding: 18px;
    font-weight: 500;
}
a{
      display: inline-block;
}
.small-menu .list-inline {
    overflow: auto;
    background: rgba(31,106,138,0.7);
    margin: 0px;
    vertical-align: bottom;
    display: inline-block;
    padding: 14px;
}

如何让div (".small-menu .list-inline")占据所有剩余的空间直到结束？

我想保留相同高度和位置的元素

你能帮我解决这个问题吗？

提前致谢！

Answer 1

Flexbox可以做到这一点：

.small-menu {
  display: flex;
  align-items: flex-end;
}
.small-menu .orange-menu {
  background: #ed7103;
  font-size: 18px;
  padding: 18px;
  font-weight: 500;
}
.small-menu .list-inline {
  overflow: auto;
  background: rgba(31, 106, 138, 0.7);
  margin: 0px;
  vertical-align: bottom;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 14px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-push-8 col-md-4 small-menu">
    <a href="#" class="orange-menu">List your Property</a>
    <ul class="list-inline">
      <li><a href="#">Travelor Login</a>
      </li>
      <li><a href="#">Owner Login</a>
      </li>
    </ul>
  </div>
</div>

div填补剩余的空间

1 个答案: