Question

作为Foundation网格布局的一部分，我有一个浮动且具有流体高度和宽度的父div。有了这个父div，我有2个子div。

我希望两个子div中的内容都居中对齐，一个div显示在容器的顶部，另一个div放在父div的最底部。

HTML：

<div class="row">
    <div class="small-9 columns">
      Dynamic amount of content
    </div>
    <div class="small-3 columns">
      <div class="top">
        top div with centered text
      </div>
      <div class="bottom">
        bottom div with centered text
      </div>
    </div>
</div>

例如：https://jsfiddle.net/3s0rq04c/11/

我尝试过使用flex，如下所示，没有运气：

.container{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top {
  align-self: flex-start;
}
.bottom {
  align-self: flex-end;
}

我也尝试过使用position：absolute;例如：

.container {
      text-align: center;
      position: relative;
    }
    .bottom {
      position: absolute;
      margin-bottom: 5px;
    }

这几乎可以使用，但是底部的文字不再是中心对齐的。

有人知道这是否可行？

Answer 1

如果您可以设置justify-content: space-between;的弹性框，则右侧列高将增加到与父级的高度相匹配，您可以使用.top分隔.bottom和{在.container

的顶部/底部{1}}

.row {
  display: flex;
}
.columns {
  border: 1px solid #ccc;
}
.container{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
    <div class="small-9 columns">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div class="small-3 columns container">
      <div class="top">
        top
      </div>
      <div class="bottom">
        bottom
      </div>
    </div>
</div>

<div class="row">
    <div class="small-9 columns">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div class="small-3 columns container">
      <div class="top">
        top
      </div>
      <div class="bottom">
        bottom
      </div>
    </div>
</div>

Answer 2

没有足够的代表评论......但是，

文字对齐中心。

.bottom {
  text-align: center;
  bottom: 0;
  align-self: flex-end;
}

我可能不会彻底理解你的问题，所以如果是这样，我会道歉。

Answer 3

您与position:absolute走在正确的轨道上。如果您知道small-9列的abs-children列总是大于min-height列的2行，则此解决方案应该有效。否则，您可能希望将等同于两行文本的position:relative添加到css。

此解决方案将.row添加到absolute，允许我们small-3将top列定位到其bottom和small-9，由.top列内文本的高度创建。然后，.bottom和position:absolute元素在该列中.row { position: relative; } .columns { border: 1px solid #ccc; } .abs-children { position: absolute; top: 0; right: 0; bottom: 0; float: none; text-align: center; } .abs-children .top { position: absolute; top: 0; left: 0; right: 0; } .abs-children .bottom { position: absolute; bottom: 0; left: 0; right: 0; }。

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />
<div class="row">
  <div class="small-9 columns">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. text
    ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
  <div class="small-3 columns abs-children">
    <div class="top">
      top
    </div>
    <div class="bottom">
      bottom
    </div>
  </div>
</div>

{{1}}

在浮动div的底部定位元素的方法？

3 个答案: