html - 在所有分辨率中以相似的方式定位图像

Question

我这里的情况有点复杂(至少对我来说很复杂)。附上 fiddle 以展示我是如何尝试完成此任务的。

我想将对话泡泡置于黄色图像黑线的中心。 (如 fiddle 所示)。

此外，当我使用较小的设备时，文本会在对话泡泡下方流动。 (你可以调整窗口大小看看)

所有这些都必须以 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>

Answer 1

试试这段代码:

.bubble {
  position: relative;
  z-index: 1;
  /*width: 80%;*/
  height: auto;
  /*    margin-left:12.5%;*/
  padding: 5%;
  background: #2e3c6f;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  color:darkgrey;
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 32px 21px 0;
  border-color: #2e3c6f transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -10.5px;
  bottom: -32px;
  left: 50%;
}

.about_bg {
  width: 100%;
  height: auto;
}

#about_container {
  height: 100vh;
  margin-top: 2.5%;
}

#row_about_1 {
  height: 80vh;
}

#row_about_2 {
  height: 20vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

解决方法:

1) 将气泡箭头设置在中心:--> 添加position absolute 和left value 50%，然后添加margin-left 10.5%(这是箭头的一半宽度)

2) 重叠内容:--> 自动设置气泡高度(之前为 80%)，现在当您调整浏览器大小时它不会受到干扰。