html - 将 div 推到居中且响应迅速的 Bootstrap 容器元素旁边

Question

有一个居中且响应迅速的 Bootstrap 容器，其中包含内容。我想将一个 div 推到容器旁边(右侧，与 container 相同的 top 位置)而不影响居中的容器。

问题是，当我将 float: left 添加到容器并将 float: right 添加到外部 div 时，容器不再居中。只有 float: right 到外部 div 将 div 仅推到右侧，但之后如何继续？

我认为 position: absolute 和固定的 width 不是选项，因为响应式 container 会改变它的 width具有不同的视口(viewport)。

有没有机会只用 HTML 和 CSS 而不用 JavaScript 来解决这个问题？

.main-content {
  border: 1px solid red;
}
.outer {
  border: 1px solid red;
  background: yellow;
  text-align: center;
  float: right;
  width: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container main-content">
  <div class="row">
    <div class="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div>
    <div class="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div>
  </div>
</div>

<div class="outer">
  Outer
</div>

Answer 1

当窗口对于容器来说太小时它不可见，你能接受吗？

如果您只是想让它位于右上角的容器之外，您可以使用一些相对/绝对定位并将“外部”div 移动到主容器内。

.main-content {
  border: 1px solid red;
  position:relative;
}

.outer {
  border: 1px solid red;
  background: yellow;
  position:absolute;
  right:-70px;
  top:0px;
  text-align: center;
  width: 70px;
}

https://jsfiddle.net/8ahrxtsk/4/

如果你想要它在容器内，只需将“右”位置更改为 0px。