Question

阿罗哈 - 我是一名新手，并且在收缩时试图让div留在我想要的地方。这是我的codepen和附带的代码。请注意我在笔上安装了引导程序。

https://codepen.io/DarrenHaynes/pen/BpNvxb

HTML：

html, body{
  height: 100%;
}
.spiritual-background { 
  height: 100%;
    background-image: url(https://s19.postimg.org/uuqru6leb/feng_sway_resized.jpg) ;
    background-position: center 25%;
    background-repeat:  no-repeat;
    background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
    background-size:  cover;
    background-color: #999; /* change this color */ 
}

.toolbar {

}

.quote-box {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  margin-right: 5%;
  transform: translate(10%, -30%);
  padding: 0.1em 0.4em;
  text-align: center;
  background-color: rgba(0,0,0,0); 
}

.toolbar {
  text-align: center;
}

h2 {
  font-size: 2em;
  padding-bottom: 0.5em;
}

h3 {
  font-size: 1.5em;
  text-align: right;
  padding-right: 0.5em;
}

CSS

transform translate

如果你看到我的班级.quote-box（我将使用jquery将随机引号放入框中，因此文本大小会不断变化），我希望文本不会移出屏幕，因为我缩小了页面宽度（和那个问题的高度）。我希望报价框保留在页面的右侧。

我确实开始使用媒体查询，但发现考虑到http://www.example.com/images/1 http://www.example.com/images/2 . . . http://www.example.com/images/2000 http://www.example.org/p/q/r/1/s/t http://www.example.org/p/q/r/2/s/t http://www.example.org/p/q/r/3/s/t . . . http://www.example.org/p/q/r/5000/s/t的动态特性，我需要制作无穷无尽的数量。

我还尝试使用带引号框的引导行。基本上将空列宽度设置为7，然后为引号框本身设置第4列的宽度，然后将空列宽度设置为1，以在引号框的右侧创建一些空格。我有一段非常艰难的时间，但试图使用这种方法让我想要它。

任何建议表示赞赏！

Answer 1

怎么样：

.quote-box {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 20px; /* set right, not left */
  width: 30%; /* width is percentage of parent */
  transform: translate(10%, -30%);
  padding: 0.1em 0.4em;
  text-align: center;
  background-color: rgba(0,0,0,0); 
}

Answer 2

我认为为您提供了一个简单的解决方案！请参阅下面的代码段，因为我的代码略有不同。

注意：运行代码段，然后点击代码段的右侧＆＃34;整页＆＃34;按钮或复制并粘贴此代码，看看它是否适合您。

＆＃13;

.spiritual-background { 
  position: absolute;
  top:0;
  left: 0;
  width:100%;
  height: 100%;
  z-index: -1;
	background-image: url(https://s19.postimg.org/uuqru6leb/feng_sway_resized.jpg) ;
	background-position: center 25%;
	background-repeat:  no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size:  cover;
	background-color: #999; /* change this color */ 
}
.toolbar button {
  margin-bottom: 10px;
}
.toolbar,.quote-box {
  position: relative;
  text-align: center;
}

.quote-box h3{
    text-align: right;
}
.quote-box {
  margin-top: 80px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="changing-background" class="spiritual-background">
</div>
<div class="toolbar">
   <button type="button" id="spiritualQuote" class="btn btn-info"> Spiritual Quotes</button>
   <button type="button" id="techQuote" class="btn btn-info"> Tech Quotes</button>
   <button type="button" id="lifeQuote" class="btn btn-info"> Life Quotes</button>
   <button type="button" id="inspirationalQuote" class="btn btn-info"> Inspirational Quotes</button>
</div>
<div class="container">
   <div class="row">
      <div class="col-sm-6 col-sm-offset-6">
         <div class="quote-box">
            <h2>When the going gets tough, the tough get going. Just like a 747 boeing. And some more text too. And another line for extra long quotes. And a little bit more for 5 lines
            </h2>
            <h3>- Billy Ocean</h3>
         </div>
      </div>
   </div>
</div>

＆＃13;

使用翻译时缩小屏幕时停止div移出页面

2 个答案: