Question

我的情况有点复杂（至少对我来说很复杂）。附上一个小提琴来展示我是如何努力实现这一目标的。

我想将讲话气泡定位在黄色图像黑线的中心。（以小提琴显示）。

此外，当我转到较小的设备时，文字会在讲话泡泡下面流动。（你可以重新调整窗口大小并查看）

所有这些必须以100 vh的高度显示，这意味着用户无需滚动即可查看气泡和图像。

sudo python setup.py  install

Answer 1

试试这段代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

解决方案：

1）在中心设置气泡箭头： - ＆GT;添加位置绝对值和左值50％，然后添加保证金 - 左10.5％（它是箭头的半宽）

2）重叠内容： - ＆GT;设置气泡高度自动（之前为80％），现在当您调整浏览器大小时，它不会受到干扰。

Answer 2

您可能想要更流畅的解决方案，但通过媒体查询，您可以调整图像大小，并在较大的屏幕上从底部定位气泡。只需添加一个步骤，例如。在屏幕上＆gt; 1200像素。为了避免溢出，我会保持容器的最小高度......

.about-container {
	height: 100vh;
	min-height: 580px;
}

.about-container .wrap {
	position: relative;
	height: 100%;
}

.bubble {
	background: #2e3c6f;
	color: #fff;
	position: absolute !important;
	bottom: 150px;
	left: 0;
	padding: 30px;
	border-radius: 15px;
	z-index: 1;
}

.bubble:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 50%;
	height: 0;
	width: 0;
	border: solid transparent;
	border-top-color: #2e3c6f;
	border-width: 30px;
	margin-left: -30px;
}

p:last-child {
	margin-bottom: 0;
}

.about-img {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 320px;
	height: auto;
}

<html>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <body>
    <div class="container about-container">
      <div class="wrap">
        <div class="col-xs-12 col-md-8 col-md-offset-2 bubble">
          <p>Heading</p>
          <p>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>Heading</p>
          <p>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>Heading</p>
          <p>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>
        <img src="http://i.imgur.com/5T5N5Vn.png" class="about-img">
      </div>
    </div>
  </body>
</html>

在所有分辨率中同样定位图像

2 个答案: