CSS 将元素放置在容器底部而不将其从流中移除

Question

我有一个包含 3 个子元素的容器。

<div class="container">
  <img />
  <div class="element1"></div>
  <div class="element2 bottom"></div>
</div>

它们的位置必须如下图所示：

image 在左栏的顶部，下面没有任何内容（它是左栏中唯一的元素）
element1在右栏顶部
element2 粘在右栏的底部（并且不能与它上面的 element1 相撞）

有人知道如何使用纯 CSS 实现这样的布局吗？理想情况下，我不想添加任何标记，但如果这是唯一可能的方法，我可以这样做。

我在这里面临的最大问题是如何将第二个元素（非图像）粘贴到容器底部而不将其从流中移除。因为如果我使用 position: absolute 并将其从流程中删除，它上面的元素可能会与其发生碰撞（两个元素的高度都未知）。

这里有一支笔可以工作： http://codepen.io/anon/pen/yNwGvQ

Answer 1

我建议您在 html 中使用两列，然后使用属性 display: flex; 按照文章 A Complete Guide to Flexbox.

中的建议为您的右栏

http://codepen.io/AlexisBertin/pen/QboYyY

全部HTML:

<div class="container">
  <div class="column column-left">
    <div class="image">This is an image</div>
  </div>
  <div class="column column-right">
    <div class="element1">This container has dynamic content so it's height is unknown and may change.<br/><br/> Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</div>
    <div class="element2">This container also has dynamic content so it's height is unknown and may change</div>
  </div>
</div>

部分CSS:

.column {
  float: left;
  height: 100%;
}
.column.column-left { width: 100px; }
.column.column-right { 
  width: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

希望你明白了。祝你好运'.

编辑：

在不向容器声明 height 的情况下实现此目的的最简单方法似乎只为第二列的 第一个块 [=46= 创建第三个父级 div ] 并将其定义为 flex: 1; 而同一第二列的 第二块 将定义为 flex: 0;.

http://codepen.io/anon/pen/yNwZmJ

更多细节在评论中解释。

Answer 2

我想出的最简单的解决方案是这个：

首先你创建这个CSS:

.container {
  width: 400px;
  padding: 10px;
  border: 1px solid red;
  background-color: white;
}
.container > img {
  float: left;
}
.container > div {
  position: relative;
  overflow: auto;
  padding-left: 5px;
  min-height: 120px; 
}
.container > div > .bottom{
  position: absolute;
  bottom: 0;
  display: block;
}

然后根据您的内容使用这些 div。当你知道你的文字很短时，你使用的第一个：

<div class="container">
  <img src="http://placehold.it/120x120">
  <div>
    <div>
      <p>This container has dynamic content so it's height is unknown and may change.</p>
    </div>
    <div class="bottom">
      <p>This container also has dynamic content so it's height is unknown and may change</div>
  </div>
</div>

当你知道你的文字很长时你使用的第二个

<div class="container">
  <img src="http://placehold.it/120x120">
  <div>
    <div>
      <p>This container has dynamic content so it's height is unknown and may change.</p>
      <p>Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</p>
    </div>
    <div>
      <p>This container also has dynamic content so it's height is unknown and may change</p>
    </div>
  </div>
</div>

不同之处在于，您从 div 中具有长文本的最后 div 中删除了 bottom class。

同样在您的 CSS 中您可以看到 .container > div{... min-height: 120px; ...}，您应该将其设置为图像的高度。如果您希望底部文字更靠下，则必须将最小高度增加到大于图像高度。

这是实际操作：http://codepen.io/anon/pen/YXgBXx

CSS 将元素放置在容器底部而不将其从流中移除

CSS Position element on bottom of container without removing it from flow

css

layout

sticky-footer