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

У меня есть 3 встроенных блоков в моем HTML: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/

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

источник

2016-08-20 Jason Axelrod

Использование 'вертикального выравнивания: top' для' '.inline класса –

https://jsfiddle.net/7jvtog6d/1/ это то, что вы ищете для? Я добавил 'vertical-align: bottom' к встроенному классу – user3080953

его еще 1px, если вы добавите вертикальное выравнивание. –

Вертикально выровняйте элементы встроенного блока с помощью 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>

источник

2016-08-20 06:13:28 kukkuz

Спасибо! Он отключился из-за черного фона и изменения цвета на моем мониторе. Но снятие скриншота и масштабирование показало, что оно идеально. –

Полезно знать, что это помогло :) приветствую вас! – kukkuz

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

ответ

Смежные вопросы