div inline-block (div переполняется, когда есть содержимое внутри)

Я не знаю, правильно ли это название, но в любом случае; в этом jsfiddle У меня есть div, содержащий два встроенных блока div .. они выровнены без проблем .. но всякий раз, когда есть содержимое в желтом div, этот div странно переполняется. check this out Я хочу знать, почему это и как исправить этоdiv inline-block (div переполняется, когда есть содержимое внутри)

HTML:

<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'> 
</head> 
<div class="header"> 
<div class="logo-container"> 
    <p class="logo"><span class="seven">7</span>asobate</p> 
    <span class="slogan">Web Developer and Data Scraper</span> 
    </div><div class="header-nav-container"> 
</div> 
</div>

CSS:

* 
{ 
    margin:0; 
} 
.header 
{ 
    width:100%; 
    height:65px; 
    background-color:gray; 

} 
.logo-container 
{ 

    display:inline-block; 
    position:relative; 
    background-color:green; 
    height:65px; 
    width:22.5%; 
    padding-left:1%; 


} 
.logo-container .logo 
{ 
    position:absolute; 
font-size:30px; 
    font-family: 'Black Ops One'; 
} 
.logo-container .logo .seven 
{ 
    color:blue; 
    font-size:40px; 
} 
.logo-container .slogan 
{ 
    position:absolute; 
    margin-top:40px; 
    font-size:12.5px; 
    font-family:'Black Ops One'; 
} 
.header-nav-container 
{ 
    margin-left:70px; 
    display:inline-block; 
    background-color:yellow; 
    height:65px; 
    width:10%; 
}

(? Psst .. Как вы думаете, что это полностью законно обращусь в качестве скребка данных)

источник

2016-04-25 Pro Haitham

Ну я извиняюсь я не знаю, почему его происходит, но решение использует vertical-align: top

.header-nav-container 
{ 
    margin-left:70px; 
    display:inline-block; 
    background-color:yellow; 
    height:65px; 
    width:10%; 
    vertical-align: top; 
}

Пример: https://jsfiddle.net/omy1p00y/5/

источник

2016-04-25 10:50:05

div inline-block (div переполняется, когда есть содержимое внутри)

ответ

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