Как разместить два изображения рядом друг с другом В заголовке

Question

Мне нужно разместить два изображения рядом друг с другом в заголовке. Один - это логотип, а один - изображение баннера - логотип - это ссылка на домашнюю страницу. Заголовок имеет красный цвет фона, поэтому после добавления баннера большая часть заголовка будет скрыта, за исключением тонкой линии красного цвета внизу. Я попытался это:

CSS:

div.container { 
    display:inline-block; 
} 

HTML:

<header> 
<div class="container"> 
<a href="index.html><img class="logo" src="images/logo.jpg" height="110" 
width="200"></a> 
</div> 
<div class="container"> 
<img class="banner" src="images/banner.jpg" height="110" width="800"> 
</div> 

Но это не сработало. Вот скриншот, показывающий веб-страницу. Баннер должен идти только справа от логотипа "Шон"

Попробовав это:

div.container { 
display:inline-block; 
Width:auto!important; 
} 

Ссылка на полный HTML, CSS и Javascript: http://jsfiddle.net/HappyHands31/kzbvLheq/

Answer 1

Ширина изображений (.banner и .logo) больше, чем их родителей (header), так что .banner идет на второй линии. Вы можете уменьшить размер .banner (например, 200)

link

Answer 2

Попробуйте это, надеюсь, это решит вашу проблему. Если у вас по-прежнему возникают проблемы, пожалуйста, укажите весь код или URL-адрес

div.container { 
    display:inline-block; 
    Width:auto!important; 
} 

Answer 3

Ваша задача в этой строке кода:

<a href="index.html> 

Вы забыли закрыть кавычки после href тега. Вы должны заменить его на

<a href="index.html"> 

В противном случае ваш код будет работать нормально.

Полный код (Примечание: Изменение в строке 3)

<header> 
    <div class="container"> 
     <a href="index.html"><img class="logo" src="images/logo.jpg" height="110" 
     width="200"></a> 
    </div> 
    <div class="container"> 
     <img class="banner" src="images/banner.jpg" height="110" width="800"> 
    </div> 
</header> 

Еще одно предложение, что у меня есть для вас, чтобы сделать изображения inline-block вместо того, чтобы контейнер DIV вокруг них. Он работает одинаково, и у вас меньше элементов в коде.

CSS

img { 
    display: inline-block; 
} 

JSFiddle: http://jsfiddle.net/5v2a317d/