将框元素浮动在容器的底部和右下方

Question

我的.top-left和.top-right正常工作：

.top-left, .top-right {
  background-color: #000;
  color: #fff;
  height: 50px;
  width: 100px;
}
.top-left {
  float: left;
}
.top-right {
  float: right;
}

<div class="container">
  <div class="top-left">
    .top-left
  </div>
  <div class="top-right">
    .top-right
  </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida ultrices elit sed finibus. Ut sed euismod ante. Integer mattis mi ex, nec ullamcorper arcu sodales ut. Curabitur accumsan massa non elementum fringilla. Phasellus tellus sem, laoreet in tristique vitae, iaculis a nisl. Nullam fringilla pulvinar velit et euismod. Aliquam dictum ornare turpis at sodales. Fusce nulla mauris, hendrerit vitae felis a, convallis ultricies urna. Phasellus eget magna risus.
</div>

但是如何实现 .bot-left和 .bot-right的显示？

 ___________ Lorem ipsum dolor sit amet, consectetur adipiscing ___________
| .top-left | elit. Aenean gravida ultrices elit sed finibus.  | .top-right |
 ----------- Ut sed euismod ante. Integer mattis mi ex, nec     ---------_--
ullamcorper arcu sodales ut. Curabitur accumsan massa non elementum 
fringilla. Phasellus tellus sem, laoreet in tristique vitae, iaculis a nisl.
 ___________ Nullam fringilla pulvinar velit et euismod.        ___________
| .bot-left | Aliquam dictum ornare turpis at sodales. Fusce   | .bot-right |
 ----------- nulla mauris, hendrerit vitae felis a, convallis   -----------

我已经尝试使用.bot-left { float: left; }和.bot-right { float: right; }并将盒子放在内容下方，但不按预期工作。

我尝试使用绝对定位，但是内容文本被涵盖：

.container {
  position: relative;
}
.bot-left, .bot-right {
  background-color: #000;
  color: #fff;
  height: 50px;
  width: 100px;
  position: absolute;
}
.bot-left {
  bottom: 0;
  left: 0;
}
.bot-right {
  bottom: 0;
  right: 0;
}

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida ultrices elit sed finibus. Ut sed euismod ante. Integer mattis mi ex, nec ullamcorper arcu sodales ut. Curabitur accumsan massa non elementum fringilla. Phasellus tellus sem, laoreet in tristique vitae, iaculis a nisl. Nullam fringilla pulvinar velit et euismod. Aliquam dictum ornare turpis at sodales. Fusce nulla mauris, hendrerit vitae felis a, convallis ultricies urna. Phasellus eget magna risus.
  <div class="bot-left">
    .bot-left
  </div>
  <div class="bot-right">
    .bot-right
  </div>
</div>

我什至尝试使用此解决方案使用Flexbox，但如果有内容，则无法使用。

我只打算在内容的开头或末尾放置一个框元素。

Answer 1

尝试一下，只需将两个div放在底部的情况下，同一CSS

.top-left, .top-right {
  background-color: #000;
  color: #fff;
  height: 50px;
  width: 100px;
}
.top-left {
  float: left;
}
.top-right {
  float: right;
}

<div class="container">
  <div class="top-left">
    .top-left
  </div>
  <div class="top-right">
    .top-right
  </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida ultrices elit sed finibus. Ut sed euismod ante. Integer mattis mi ex, nec ullamcorper arcu sodales ut. Curabitur accumsan massa non elementum fringilla. Phasellus tellus sem, laoreet in tristique vitae, iaculis a nisl. Nullam fringilla pulvinar velit et euismod. Aliquam dictum ornare turpis at sodales. Fusce nulla mauris, hendrerit vitae felis a, convallis ultricies urna. Phasellus eget magna risus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida ultrices elit sed finibus. Ut sed euismod ante. Integer mattis mi ex, nec ullamcorper arcu sodales ut. Curabitur accumsan massa non elementum fringilla. Phasellus tellus sem, laoreet in tristique vitae, iaculis a nisl. Nullam fringilla pulvinar velit et euismod. Aliquam dictum ornare turpis at sodales. Fusce nulla mauris, hendrerit vitae felis a, convallis ultricies urna. Phasellus eget magna risus.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida ultrices elit sed finibus. Ut sed euismod ante. Integer mattis mi ex, nec ullamcorper arcu sodales ut. Curabitur accumsan massa non elementum fringilla. Phasellus tellus sem, laoreet in tristique vitae, iaculis a nisl. Nullam fringilla pulvinar velit et euismod. Aliquam dictum ornare turpis at sodales. Fusce nulla mauris, hendrerit vitae felis a, convallis ultricies urna. Phasellus eget magna risus.
           <div class="top-left">
    bot-left
  </div>
  <div class="top-right">
    bot-right
  </div>
</div>