0

у меня есть следующий html

<p>
    <div class="class">
  <div class="green_fon first">
    <span class="line word">Мама</span>
    <span class="double_line word">помыла</span>
    <span class="wavy_line word">грязную</span>
    <span class="dotted_line word">раму</span>
    <span class="False">,</span>
    <span class="dotted_line word">облитую</span>
    <span class="dotted_line word">жижей</span>
    <span class="False">.</span>
  </div>
  <div class="green_fon first">
    <span class="dash_dotted_line word">Наконец</span>
    <span class="line word">она</span>
    <span class="double_line word">догадалась</span>
    <span class="False">,</span>
    <div class="blue_fon">
      <span class="word">что</span>
    </div>
    <span class="line word">это</span>
    <span class="double_line word">был</span>
    <span class="wavy_line word">ее</span>
    <span class="double_line word">сын</span>
    <span class="False">.</span>
  </div>
  <div class="green_fon first">
    <div class="blue_fon">
      <span class="word">Но</span>
    </div>
    <span class="dash_dotted_line word">тут</span>
    <span class="dotted_line word">ее</span>
    <span class="double_line word">осенило</span>
    <span class="False">!</span>
  </div>
  <div class="green_fon first">
    <div class="blue_fon">
      <span class="word">Что</span>
    </div>
    <div class="blue_fon">
      <span class="word">если</span>
    </div>
    <span class="line word">это</span>
    <span class="double_line word">был</span>
    <span class="line word">дядя</span>
    <span class="dotted_line word">Вова</span>
    <span class="False">?</span>
  </div>
  <div class="green_fon first">
    <span class="line word">Она</span>
    <span class="double_line word">вскочила</span>
    <div class="blue_fon">
      <span class="word">с</span>
    </div>
    <span class="dotted_line word">кровати</span>
    <div class="blue_fon">
      <span class="word">и</span>
    </div>
    <span class="double_line word">бросилась</span>
    <span class="dash_dotted_line word">вдогонку</span>
    <div class="blue_fon">
      <span class="word">за</span>
    </div>
    <span class="dotted_line word">ним</span>
    <span class="False">.</span>
  </div>
</div>
</p>

сss с 'фонами':

.blue_fon{ /* div */
  display: inline-block;
  background: #48cae2;
  font-size: 17px;
  border-top: 4px solid #001f3f;
  border-radius: 8px;
  display: flex;

  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;

  margin: 5px;
}

.green_fon{ /* div */
  display: inline-block;
  background: #7def72;
  font-size: 17px;
  border-top: 4px solid #001f3f;
  border-radius: 8px;
  display: flex;

  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;

  margin: 5px;

}

.first{
  display: flex;
  justify-content: start-end;

}

.class{
  display: flex;
  justify-content: flex-start;

  border: 1px solid #7d7d7d;
  border-top: 4px solid #001f3f;
  border-radius: 8px;

  background: #e4e4e4;
}

и css c для подчеркивания текста (в качестве линий используются картинки фона, прикладывать их не буду, они тут не нужны):

.word {
    margin-left: 6px;
}
.dash_dotted_line {
    background: url(../img/dash_dotted_line.png) repeat-x bottom;
    background-image: url(../img/dash_dotted_line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.double_line {
    background: url(../img/double_line.png) repeat-x bottom;
    background-image: url(../img/double_line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.wavy_line {
    background: url(../img/wavy_line.png) repeat-x bottom;
    background-image: url(../img/wavy_line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.line {
    background: url(../img/line.png) repeat-x bottom;
    background-image: url(../img/line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.dotted_line {
    background: url(../img/dotted_line.png) repeat-x bottom;
    background-image: url(../img/dotted_line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.without_line {

}

  1. Пытаюсь выровнять текст во всех блоках, никак не получается добиться одной линии текста.
  2. Если добавить блоков, то они не будут переносится, подскажите в какую сторону гуглить. (немного исправил код, но оба вопроса так и не решил, тут наверное надо что-то сделать с displey у старшего div, но я не понимаю)

1 ответ 1

1

По первому пункту:

.first {
   display: flex;
   align-items: center;
}

По второму пункту добавить:

 .class {
    flex-wrap: wrap;
 }
1
  • Жаль что так поздно ответили, сэкономили бы мне нервы)
    – YaAlex
    25 апр 2021 в 21:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.