Как выровнять вершины двух пролетов, расположенных внутри div? - PullRequest
Новая
       12

Как выровнять вершины двух пролетов, расположенных внутри div?

0 голосов
/ 16 октября 2019

Я пытаюсь выровнять верх изображения кошки вертикально с верхом текста, показанного на следующем рисунке:

enter image description here

Как видите, текст ниже, чем рис.

Вот CSS и HTML: 

<div>
  <span style="vertical-align: top; width: 5%; float: left"><img width="80px" src="./5 Bilder_Logos/cat.jpeg"/></span>
  <span style='vertical-align: top; width: 95%; float: right;font-size:10.0pt;font-family:"Arial","sans-serif";color:black'><o:p>&nbsp;</o:p></span></p>
  <p class=EinfAbs style='margin-top:5.65pt'><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'>AWARD WINNER 2019 </span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:red;letter-spacing:.4pt'>(14 pt Arial Bold)</span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'><o:p></o:p></span></b></p>
  <p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial","sans-serif"'>Erionsequiat. Ibus apel everehe nectinihil et, quia <br>nonestrupta cuptaesed que peri nam nonsedi tempore,  <br>ut enimaione nonsedi vitat. <span style='color:red'>(10 pt Arial Regular)</span>
</div>

Когда я искал похожие проблемы в Интернете, ответом, казалось, было использование vertical-align: top. Это не помогло в моем случае. Может ли кто-нибудь помочь мне понять это? Спасибо.

Только одно: в ответе должны использоваться базовые CSS, без сетки или flexbox. Это потому, что мне нужно, чтобы его можно было просматривать во всех браузерах.

Ответы [ 2 ]

1 голос
/ 16 октября 2019

Попробуйте это:

.html 

<div class="example">
  <img src="…">
  <p>Award……</p>
</div>

.css 

.example {
  display: inline-block;

  img, p {
    vertical-align: top;
  }
}

Я предлагаю вам удалить все атрибуты стиля и поместить их в классы:)

0 голосов
/ 16 октября 2019

Лучше использовать flex box вместо плавающего и вертикального выравнивания. 

<div class="box" style='display: flex;'>
    <img width="120px" height="120px" src="./5 Bilder_Logos/cat.jpeg"/>
    <div class="content" style="margin-left: 15px;">
        <p class=EinfAbs style='margin-top:0;'><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'>AWARD WINNER 2019 </span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:red;letter-spacing:.4pt'>(14 pt Arial Bold)</span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'><o:p></o:p></span></b></p>
        <p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial","sans-serif"'>Erionsequiat. Ibus apel everehe nectinihil et, quia <br>nonestrupta cuptaesed que peri nam nonsedi tempore,  <br>ut enimaione nonsedi vitat. <span style='color:red'>(10 pt Arial Regular)</span>
    </div>
</div>

и использовать align-items: flex-start; для выравнивания содержимого вашего бокса.

...