容器底部的CSS Position元素，无需将其从流中移除

Question

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

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

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

• 图片位于左侧列的顶部，没有任何内容位于其下方（它是左列中唯一的元素）
• element1 位于右栏的顶部
• element2 贴在右栏的底部（并且不得与位于其上方的 element1 碰撞）

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

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

这是一支可以使用的笔： http://codepen.io/anon/pen/yNwGvQ

Answer 1

我建议您在 html 中使用两列，然后根据文章{{3中的建议使用属性display: flex;作为右列}}

A Complete Guide to Flexbox

所有 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的情况下实现此目的的最简单方法似乎只是为第二列的第一个块创建第三个父div并将其定义为flex: 1;，而同一第二列的第二个将定义为flex: 0;。

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

评论中解释了更多细节。

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

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

以下是它的实际应用：http://codepen.io/anon/pen/YXgBXx