时间戳

首页 > 解决方案 > 关于定位css创建的对话气泡

html - 关于定位css创建的对话气泡

问题描述

我正在创建一个网页来为我的学生展示一些问答。我在网上搜索并发现以下 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 效果很好，图像在左侧对齐，对话气泡在右侧。但是当我使用移动设备或缩小浏览器的屏幕时，它仍然排成一排，并且对话气泡变得如此纤细。如何根据设备/浏览器大小更改布局。

标签： htmlcss

解决方案

您可以使用此代码

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

推荐阅读