浮动容器左下角和右下角的盒子元素

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>

我什至尝试使用 this solution 使用 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>