我在這裏有點複雜的情況(至少對我來說很複雜)。附上小提琴,以顯示我是如何努力完成這一點。所有分辨率下的位置圖像都相似
我想將講話泡泡放在黃色圖像黑線的中央。 (在小提琴中顯示)。
另外,當我走到較小的設備時,文本會在對話框下面流動。 (你可以重新調整窗口大小並看看)
所有這些都必須顯示在100 vh高度的含義,用戶不需要滾動查看氣泡以及圖像。
Fiddle Link to show what I was doing
<div class="container" id="about_container">
<div class="row" id="row_about_1">
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 bubble">
<div class="abt_txtcontainer">
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
</div>
<div class="row" id="row_about_2">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<img src="http://i.imgur.com/5T5N5Vn.png" class="about_bg img-responsive">
</div>
<div class="col-lg-2"></div>
</div>
</div>
我看到泡沫在屏幕的中央你是什麼意思黃色image'的黑線的中心' ? – Pedram