浮动框元素在容器的左下角和右下角

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-left { float: left; }和.bot-right { float: right; } .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，但如果有内容，则无法使用。

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

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>