Размещение двух изображений в верхних углах веб-страницы без наложения

Question

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

Чтобы проиллюстрировать, где я сейчас нахожусь, приведен сокращенный фрагмент HTML-кода:

<div class="header">
    <img src="left.png">
    <img style="float: right;" src="right.png">
</div>

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

CSS-решение предпочтительнее, конечно; Я бы избегал использования элемента <table>, если это возможно.

Answer 1

Знаете ли вы размер изображений? Вы могли бы сделать что-то вроде ...

<div class="header">
    <img id="left">
    <img id="right">
</div>

#header
{
    position:relative;
    min-width: 200px;
}

#left
{
    position:absolute;
    width: 100px;
    top: 0;
    left: 0;
}

#right
{
    position:absolute;
    width: 100px;    
    top: 0;
    right: 0;
}

Я не проверял, но с головы до головы что-то вроде этого должно работать нормально.

Answer 2

Вы можете использовать некоторую HTML-разметку, например:

    <div class = "header">
        <div class = "leftimage"><img src="left.png"></div>
        <div class = "centerspace"></div>
        <div class = "rightimage"><img src="right.png"></div>
    </div>

, а затем используйте следующие классы для стиля:

<style>
.leftimage{
float:left;
}
.centerspace{
float:left;
}
.rightimage{
float:right;
}
</style>