KDZaster
Grand Finals" />

Встроенные блоки HTML не являются прямыми?

123 просмотра

1 ответ

У меня есть 3 встроенных блока в моем HTML:

<div class="top">

    <div class="inline color2 player1 polygon">
        <div class="title">KDZaster</div>
    </div>

    <div class="inline color1 round polygon">
        <div class="title">Grand Finals</div>
    </div>

    <div class="inline color2 player2 polygon">
        <div class="title">DarthArma</div>
    </div>

</div>

Все 3 блока установлены display: inline-block, и все они имеют одинаковую высоту строки. Однако средний блок имеет меньший размер шрифта. Из-за этого меньшего размера шрифта, сам блок, кажется, установлен ниже других блоков. Я включил jsfiddle:

https://jsfiddle.net/7jvtog6d/

Почему это происходит? Есть ли легкое исправление?

Автор: Jason Axelrod Источник Размещён: 08.11.2019 10:57

Ответы (1)


4 плюса

Решение

Вертикально выровняйте элементы inline-block, используя vertical-align:topваш css, и это будет работать нормально!

Проверьте это и дайте мне знать ваши отзывы. Спасибо!

.top > div.polygon {
    display: inline-block;
    vertical-align: top;
}

:root {
  --main-color1: rgba(255, 000, 000, 0.5);
  --main-color2: rgba(000, 255, 255, 0.5);
  --main-color3: rgba(255, 255, 255, 0.5);
  --main-height: 40px;
  --main-gutter: -10px;
  --main-padding: 10px;
  --font-family: 'Franklin Gothic';
  --font-color: #FFFFFF;
  --font-large: 30px;
  --font-small: 14px;
  --font-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000;
  --arrow-width: 15px;
  --round-width: 150px;
  --player-width: 200px;
  --score-width: 40px;
  --out-speed: 0.5s;
  --in-speed: 5s;
}
body {
  color: var(--font-color);
  font-family: var(--font-family);
  font-size: var(--font-large);
  text-shadow: var(--font-shadow);
  line-height: var(--main-height);
  margin: 10px 0;
  text-align: center;
  background-color: black;
}
.slow {
  transition: all var(--in-speed) ease;
}
.fast {
  transition: all var(--out-speed) linear;
}
.inline {
  display: inline-block;
  margin: 0 -8px;
}
.color1 {
  background-color: var(--main-color1);
}
.color2 {
  background-color: var(--main-color2);
}
.color3 {
  background-color: var(--main-color3);
}
.round {
  font-size: var(--font-small);
  text-transform: uppercase;
  width: var(--round-width);
}
.round.polygon {
  -webkit-clip-path: polygon(0 calc(var(--main-height) / 2), var(--arrow-width) 0, calc(var(--round-width) - var(--arrow-width)) 0, var(--round-width) calc(var(--main-height) / 2), calc(var(--round-width) - var(--arrow-width)) var(--main-height), var(--arrow-width) var(--main-height));
}
.player1,
.player2 {
  width: var(--player-width);
}
.player1 .title {
  text-align: right;
  padding: 0 20px;
}
.player2 .title {
  text-align: left;
  padding: 0 20px;
}
.player1.polygon,
.player2.polygon {
  -webkit-clip-path: polygon(var(--arrow-width) calc(var(--main-height) / 2), 0 0, var(--player-width) 0, calc(var(--player-width) - var(--arrow-width)) calc(var(--main-height) / 2), var(--player-width) var(--main-height), 0 var(--main-height));
}
.top > div.polygon {
  display: inline-block;
  vertical-align: bottom;
}
<body>

  <div class="top">

    <div class="inline color2 player1 polygon">
      <div class="title">KDZaster</div>
    </div>

    <div class="inline color1 round polygon">
      <div class="title">Grand Finals</div>
    </div>

    <div class="inline color2 player2 polygon">
      <div class="title">DarthArma</div>
    </div>

  </div>

</body>

Автор: kukkuz Размещён: 20.08.2016 06:13
Вопросы из категории :
32x32