Question

我的.top-left和.top-right正在按预期工作：

＆＃13;

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

＆＃13;

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

＆＃13;

但是如何才能将.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; }，并将框放在内容下方但不按预期工作。

我尝试使用绝对定位，但内容文字正在涵盖：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

将容器元素浮动到容器的左下角和右下角

1 个答案: