Позиционирование с помощью HTML и css

Question

<div id="pageHeading"> 
    <h1>zisland</h1> 
    <img src="islandpic.jpg" alt="Mountain View" style="width:50px;height:50px"> 
</div> 

#pageHeading{ 
    color: #000000; 
    width: auto; 
    height: auto; 
    text-align: center; 
    background-color: #800080; 
} 

Изображение острова, похоже, находится по центру под текстом «zisland». Мой вопрос: как мне получить изображение острова, которое будет расположено справа от текста «zisland» вместо того, чтобы быть внизу?

Answer 1

Используйте float: right на теге <img>, или float: left на <h1>.

<div id="pageHeading"> 
    <h1>zisland</h1> 
    <img src="islandpic.jpg" alt="Mountain View"> 
</div> 

#pageHeading { 
    color: #000000; 
    width: auto; 
    height: auto; 
    background-color: #800080; 
} 

#pageHeading h1 { 
    float: left; 
} 

#pageHeading img { 
    width: 50px; 
    height: 50px 
} 

Answer 2

Вы можете после этого: здесь два варианта.

#pageHeading { 
 

 
    color: #000000; 
 

 
    width: auto; 
 

 
    height: auto; 
 

 
    text-align: center; 
 

 
    background-color: #800080; 
 

 
} 
 

 
#pageHeading h1, 
 

 
#pageHeading img { 
 

 
    display: inline-flex; 
 

 
    margin: 0; 
 

 
} 
 

 

 
#pageHeading1 { 
 
    background-color: #800080; 
 
    color: #000000; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    width: auto; 
 
} 
 
#pageHeading1 h1 { 
 
    display: inline-flex; 
 
    margin: 0; 
 
} 
 
#pageHeading1 img { 
 
    float: right; 
 
    height: 50px; 
 
    width: 50px; 
 
}

<div id="pageHeading"> 
 
    <h1>zisland</h1> 
 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Alouette-iii-boven-berggebied.jpg/300px-Alouette-iii-boven-berggebied.jpg" alt="Mountain View" style="width:50px;height:50px"> 
 
</div> 
 
<br/><br/><br/> 
 
<div id="pageHeading1"> 
 
    <h1>zisland</h1> 
 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Alouette-iii-boven-berggebied.jpg/300px-Alouette-iii-boven-berggebied.jpg" alt="Mountain View" style="width:50px;height:50px"> 
 
</div>

Answer 3

Используйте дисплей: встроенный блок; проп для IMG и тега h1

JSFiddle

CSS код

#pageHeading, h1, img 
{ 
    display:inline-block; 
} 

Answer 4

У меня есть получил быстрый и грязный исправление для вас .can вы измените DIV, как показано ниже.

Надеется, что это помогает :)

<div id="pageHeading"> 
    <h1> 
     zisland <img 
      src="islandpic.jpg" alt="Mountain View" 
      style="width: 50px; height: 50px"> 
    </h1> 

</div>