h1 отказывается гнездиться в div

У меня есть div. Это 100% ширина и 150 пикселей. Я вложил в него тег <h1>, и он находится под изображением, а не рядом с ним.h1 отказывается гнездиться в div

<body> 
<div class='topbar'> 
<img src='img source is here'/> 
<h1> 
GO COSMOS!!! 
</h1> 
</div> 
</body>

CSS:

body { 
     background-color: #aaffaa; 
    } 
    .topbar { 
     width: 100%; 
     height: 150px; 
     background-color: #00bb00; 
    } 
    img { 
     height: 150px; 
     width: 150px; 
    } 
    h1 { 

    }

источник

2016-03-09 redwolf10105

Все теги заголовка являются block по умолчанию, то есть он охватывает ширину 100%. Если вы хотите его бок о бок другой элемент, который нужно изменить display так:

h1 { 
    display: inline; 
}

источник

2016-03-09 18:56:12 OptimusCrime

Неа, не помогло – redwolf10105

Попробуйте добавить дисплей встроенный в фотошопе тоже. – OptimusCrime

Нет, не работает. – redwolf10105

рубрикой (<h1>, <h2> и т.д.) является блок уровень элемента:

Элемент уровня блока занимает все пространство своего родительского элемента (контейнера), тем самым создавая «блок». Эта статья помогает объяснить, что это значит. _{Source: MDN Docs}

Просто отображения h1 inline-block как:

h1 { 
    display: inline-block; 
    vertical-align:top; 
    /*vertical-align aligns it at the top of the image, instead of the baseline*/ 
}

JSFiddle Example with your code

источник

2016-03-09 18:56:52

Другим вариантом было бы плавать в два внутренних элементов осталось. См скрипку: https://jsfiddle.net/DIRTY_SMITH/8gy5oprw/1/

img { 
    float: left; 
    height: 150px; 
    width: 150px; 
} 

h1 { 
    float: left; 
}

источник

2016-03-09 18:59:45

Почему это было приостановлено? –

h1 отказывается гнездиться в div

ответ

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