Речевой пузырьковый код

ProgramBox

Речевой пузырьковый код

Post author:admin
Запись опубликована:30 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

В моем коде разделы перекрываются, но я не могу понять, как это сделать. Я пробовал изменять границы, вставлять отступы, пробелы, регулировать ширину, проверять код, удалять абсолютные позиции, но ничего из этого не сработало. Речевые пузырьки не обязательно должны быть интерактивными, но мне нужно, чтобы они оставались одинаковой ширины, но разной высоты. Мне также нужен небольшой промежуток между каждым из них, но на данный момент промежутка вообще нет.

 <!DOCTYPE html>
<!-- Author: Lorna Costelloe -->
<html>
    <head>
    <meta charset = "utf-8">
    <title>Speech Bubble</title>
    <style media="screen" type="text/css">
        .speech-bubble{
            background-color: #f4911c;
            border: 3px solid #662f8c;
            border-radius: 5px;
            width: 500px;
            text-align: center;
            padding: 20px;
            position: absolute;}
        .speech-bubble .arrow {
            border-style: dotted;
            position: absolute;}
         .bottom {
            border-color: #662f8c transparent transparent transparent;
            border-width: 8px 8px 0px 8px;
            bottom: -8px;}
        .bottom:after {
            border-color: #f4911c transparent transparent transparent;
            border-style: dotted;
            border-width: 7px 7px 0px 7px;
            bottom: 1px;
            content: "";
            position: absolute;
            left: -7px;}
    </style>
</head>
<body>
    <!--copy and paste this for a new speech bubble. 
    <div class="speech-bubble">
        <div class="arrow bottom right">
        </div>
         CONTENT HERE. 
    </div>-->
    <div class="speech-bubble">
        <div class="arrow bottom right"></div>
        TESt test test test test test test tes test TESt test test test      test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
    </div>
    <br><br>
    <div class="speech-bubble">
        <div class="arrow bottom right">
        </div>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
        second test second test second test second test second test second test second test second test second test second test <br><br>
    </div>
</body>

1. Использование .speech-bubble { position:relative } вместо position:absolute , похоже, решает большинство ваших проблем. Может быть.. Я в основном предполагаю… Из вашего описания довольно сложно понять, какой конечный результат вам нужен. Не уверен, что они <div class="arrow bottom right"></div> тоже должны делать? Предполагаю, что они должны быть мелочами у края пузыря, чтобы создать эффект «речевого пузыря»? Вероятно, можно использовать изображение, чтобы увидеть, что вы пытаетесь создать.

2. И jsfiddle был бы полезен.

Ответ №1:

Упрощайте!

Обновление — теперь с фиолетовой рамкой со стрелкой

Есть скрипка!

HTML

 <div class="speech-bubble"></div>

CSS

  .speech-bubble {
      background-color: #f4911c;
      border: 3px solid #662f8c;
      border-radius: 5px;
      width: 500px;
      text-align: center;
      padding: 20px;
      position: relative;
      margin: 0 0 40px;
  }
  .speech-bubble:before {
      border-color: #662f8c transparent transparent transparent;
      border-width: 8px 8px 0px 8px;
      border-style: dotted;
      position: absolute;
      left: 9px;
      bottom: -8px;
      content:'';
  }
  .speech-bubble:after {
      border-color: #f4911c transparent;
      border-style: dotted;
      border-width: 7px 7px 0px;
      bottom: -7px;
      content:'';
      position: absolute;
      left: 10px;
  }

Ответ №2:

Попробуйте так: ССЫЛКА

CSS:

   .speech-bubble {
      background-color: #f4911c;
      border: 3px solid #662f8c;
      border-radius: 5px;
      width: 500px;
      text-align: center;
      padding: 20px;
      position: relative;
  }

Метки: Речевой пузырьковый код