将 div 推送到居中和响应式 Bootstrap 容器元素旁边

Question

有一个居中且响应迅速的引导程序container，其中包含内容。我想在容器旁边推一个 div（右侧，与container 相同的top 位置）而不影响居中的容器。

问题是，当我将 float: left 添加到容器并将 float: right 添加到外部 div 时，容器不再居中。只有float: right到外层div才会把div推到右边，但是之后怎么办呢？

我认为带有固定width 的position: absolute 是没有选择的，因为响应式container 将使用不同的视口改变其width。

是否有机会仅使用 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

这是您正在寻找的行为吗？

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

<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="container">
  <div class="row">
    <div class="col-md-12 text-right">
      Outer
    </div>
  </div>
</div>

或者这个：

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

<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="outer">
    Outer
  </div>

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

Answer 2

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

如果您只是希望它位于右上角的容器之外，您可以使用一些相对/绝对定位并将“外部” 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。