html - float 框元素在容器的左下 Angular 和右下 Angular

我的.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，但如果有内容，则无法使用。

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

最佳答案

试试这个，这将为您工作，只需将两个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>

关于html - float 框元素在容器的左下 Angular 和右下 Angular ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43556303/