Совместите два изображения рядом друг с другом

Я хочу разместить два изображения на моей странице HTML.Совместите два изображения рядом друг с другом

Я хочу, чтобы изображения оставались бок о бок, даже если размер страницы меняется.
Я также хочу, чтобы второе изображение охватывало весь заголовок страницы, т.е. все пространство осталось после первого изображения. Изображения здесь имеют разный размер.

В настоящее время я разместил два изображения рядом друг с другом, но когда я изменяю размер страницы, изображение обертывается и входит в следующую строку после первого изображения.

Вот мой пример кода и CSS:

.header { 
 
    display: inline-block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 120px; 
 
}

<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo"> 
 
<img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">

Вот Fiddle.

источник

2015-06-15 kurenai Kunai

Использование white-space: nowrap для предотвращения упаковки.

.header { 
 
    margin: 0 auto; max-width: 800px; /*centering header*/ 
 

 
    height: 120px; position: relative; /*scale header images to 120px*/ 
 
    white-space: nowrap; /*keep one-line*/ 
 
    overflow: hidden; /*hide excess images parts on small screens*/ 
 
} 
 
.header>img { height: 100%;}


 

 
<body> 
 
    <div class="header"> 
 
    <img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo"> 
 
    <img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner"> 
 
    </div> 
 
</body>

источник

2015-06-15 05:50:08

'no-wrap' не помогло :( –

ничего не помогло? Посмотрите, пожалуйста, фрагмент или хотите, чтобы изображения меняли его высоту для установки ширины окна? –

Ваш снипп отлично выглядит, но когда я вставляю код в свою скрипку, он не работает. –

Дают стиль

.header { 
    display: block; 
    float:left; 
    height: 120px; 
}

на обоих изображениях

источник

2015-06-15 05:39:51

Использование 'поплавок: левый,' это плохая практика, когда дело доходит до выравнивания дивы или изображения бок о бок. –

.header { 
 
    display: inline-block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 50%; 
 
    height:120px; 
 
} 
 

 

 
HTML:


 

 
<body> 
 
    <img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo"> 
 
    <img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner"> 
 
</body>

источник

2015-06-15 05:42:29

@Akash Любопытный -> Почему вы используете 'max-width: 50%;'? Изображения здесь имеют разный размер, и я хочу, чтобы второе изображение охватывало весь заголовок страницы, т.е. все пространство осталось после первого изображения. Благодарю. –

Я использовал максимальную ширину: 50%; потому что я не хотел, чтобы разрешение изображения уходило. Если вы хотите, чтобы второе изображение охватывало весь заголовок, не давайте ему фиксированную высоту. Это будет беспорядок с разрешением. –

Но я хочу, чтобы высота обоих изображений оставалась неизменной. Я хочу сделать это, потому что хочу, чтобы эти два изображения были логотипом и баннером моего заголовка веб-сайта. –

Нанести ниже стиле:

.header { 
    display: inline-block; 
    height: 120px; 
    width: 50%; 
}

источник

2015-06-15 05:43:51

Try с max-widthDemo

.header { 
    max-width:50%; 
}

источник

2015-06-15 05:47:59

Совместите два изображения рядом друг с другом

ответ

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