у меня есть следующий 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 {
}
- Пытаюсь выровнять текст во всех блоках, никак не получается добиться одной линии текста.
- Если добавить блоков, то они не будут переносится, подскажите в какую сторону гуглить.
(немного исправил код, но оба вопроса так и не решил, тут наверное надо что-то сделать с
displey
у старшегоdiv
, но я не понимаю)