关于定位css创建的对话气泡答案

【问题标题】：About positioning the speech bubble created by css关于定位css创建的对话气泡
【发布时间】：2020-02-19 16:18:27
【问题描述】：

我正在创建一个网页来为我的学生展示一些问答。我在网上搜索，发现下面的 CSS 可以用来创建一个左侧或右侧带有箭头的对话气泡。

.speech {
  background: #efefef;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0px 30px 40px 160px;
  max-width: 88%;
  padding: 15px;
  position: relative;
  filter: drop-shadow(6px 4px 0px rgba(0, 0, 0, 0.2));
  border: 1px solid black;
}

.onLeft::after {
  border-left: 11px solid transparent;
  border-right: 11px solid #efefef;
  border-top: 11px solid #efefef;
  border-bottom: 11px solid transparent;
  content: "";
  position: absolute;
  left: -20px;
  top: 8px;
  filter: drop-shadow(-2px -1px 0px black);
}

.onRight:after {
  content: "";
  position: absolute;
  border-left: 11px solid #efefef;
  border-right: 11px solid transparent;
  border-top: 11px solid #efefef;
  border-bottom: 11px solid transparent;
  right: -20px;
  top: 8px;
  filter: drop-shadow(2px -1px 0px black);
}

我只能在 Intranet 上托管我的网站，以下 HTML 将显示捕获中所见的内容

<div style="font-size: 12pt; margin-bottom: 20px; clear: both;">
  <img style="float: left; margin: 15px; src="logopic.png" width="120" />
  <div class="speech onLeft">
    Here is my example of a speech bubble created in CSS and HTML. 
  </div>
</div>

logopic.png 的宽度约为 120 像素，因此我的语音气泡向右移动了约 160 像素以留出一些间隙。

看起来不错。但是，当我尝试使用右侧的箭头和右侧的 logopic 浮动应用语音气泡时，位置就搞砸了

<div style="font-size: 12pt; margin-bottom: 20px; clear: both;">
  <img style="float: left; margin: 15px; src="logopic.png" width="120" />
    <div class="speech onLeft">
      Here is my example of a speech bubble created in CSS and HTML. </div>
    </div>
</div>

<div style="font-size: 12pt; margin-bottom: 20px; clear: both;">
  <img style="float: right; margin: 15px; src="logopic.png" width="120" />
  <div class="speech onRight">
    Here is my example of a speech bubble created in CSS and HTML. The arrow is on the right and the image is floating to the right. 
  </div>
</div>

对话气泡一直向右移动。我试图为气泡的 div 上的“左”属性（如左：-20px）添加移位，但没有帮助。有解决此问题的想法吗？

附加问题：我正在尝试使用 flexbox 修改 CSS

.dia {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  padding: 1em;
  border-radius: 3px;
  max-width: 88%;
}
.speecher {
  margin-right: 30px;
  order: 0;
}

<div class="dia">
  <img class="speecher" src="logopic.jpg"/>
  <div class="speech onLeft">
    testing ... testing ... testing ... testing ... testing ... testing ... testing ... testing ... testing ... testing ... testing ... 
  </div>
</div>

我发现当设备屏幕很大时，CSS 效果很好，图像在左侧对齐，对话气泡在右侧对齐。但是当我使用移动设备或缩小浏览器屏幕时，它仍然排成一排，并且对话气泡变得如此纤细。如何根据设备/浏览器大小更改布局。

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>index</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    .speech {
      background: #efefef;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      font-size: 1.2rem;
      line-height: 1.3;
      margin: 0px 30px 40px 190px;
      max-width: 80%;
      padding: 15px;
      position: relative;
      filter: drop-shadow(6px 4px 0px rgba(0, 0, 0, 0.2));
      border: 1px solid black;
    }
    
    .onLeft::after {
      border-left: 11px solid transparent;
      border-right: 11px solid #efefef;
      border-top: 11px solid #efefef;
      border-bottom: 11px solid transparent;
      content: "";
      position: absolute;
      left: -20px;
      top: 8px;
      filter: drop-shadow(-2px -1px 0px black);
    }
    
    .onRight:after {
      content: "";
      position: absolute;
      border-left: 11px solid #efefef;
      border-right: 11px solid transparent;
      border-top: 11px solid #efefef;
      border-bottom: 11px solid transparent;
      right: -20px;
      top: 8px;
      filter: drop-shadow(2px -1px 0px black);
    }
    
    @media only screen and (max-width: 1366px) {
      .speech {
        margin: 0px 30px 40px 190px;
        max-width: 72%;
      }
    }
    
    @media only screen and (max-width: 1024px) {
      .speech {
        margin: 0px 30px 40px 190px;
        max-width: 64%;
      }
    }
    
    @media only screen and (max-width: 768px) {
      .speech {
        margin: 0px 30px 40px 190px;
        max-width: 51%;
      }
    }
    
    @media only screen and (max-width: 767px) {
      .speech {
        margin: 0px 30px 40px 190px;
        max-width: 45%;
      }
    }
    
    @media only screen and (max-width: 575px) {
      .speech {
        margin: 0px 30px 40px 190px;
        max-width: 30%;
      }
    }
  </style>
</head>

<body>
  <div style="font-size: 12pt; margin-bottom: 20px; clear: both;">
    <img style="float: left; margin: 15px;" src="https://www.w3schools.com/images/picture.jpg" width="120 " />
    <div class="speech onLeft ">Here is my example of a speech bubble created in CSS and HTML.</div>
  </div>
  <div style="font-size: 12pt; margin-bottom: 20px; clear: both; ">
    <img style="float: right; margin: 15px;" src="https://www.w3schools.com/images/picture.jpg" width="120" />
    <div class="speech onRight">Here is my example of a speech bubble created in CSS and HTML. The arrow is on the right and the image is floating to the right.</div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

啊……这就是我需要的。谢谢

【解决方案2】：

我会在这里忘记float。如果把容器变成 Flexbox 容器，一切都会变得异常简单。您不必使用 160 像素的左边距。

在第二种情况下，如果您无法更改顺序，您可以使用 Flexbox 进行更改（使用 order）。如果您需要确切的代码来解决这个问题，请告诉我，尽管我认为您可以设法解决它。

在这里查看一些技巧： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

谢谢。弹性盒工作。我正在使用 align-items: flex-start; AND 弹性方向：行；它运作良好。但是，我发现一个问题，如果我使用“flex-direction: row”，当设备/屏幕尺寸较小时，它仍然会将语音和图像排成一行，因此语音气泡变得如此纤细。我想知道是否有任何方法可以根据屏幕尺寸更改布局，例如对于宽屏幕，它按行对齐，否则按列对齐。
您可以设置一个断点并更改为flex-direction: column 以获得较小的屏幕。您可能还需要将 align-self 设置为 .onLeft 的 flex-start 和 .onRight 的 flex-end