Выровняйте два изображения по левому и правому нижним углам a <div>

Question

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

    <div id="header" >
        <div style="float:left" >
            <img src="media/logo1.png"/>
        </div>
        <div style="float:right" >
            <img src="media/logo2.png"/>
        </div>
    </div>

Хотя это работает при выравнивании по левому и правому краям, я не могу найти хорошую настройку для выравнивания обоих изображений по низу родительского элемента <div>. Похоже, они выровнены к вершине.

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

Answer 1

Если ваш заголовок имеет фиксированную высоту, просто используйте абсолютное позиционирование:

<div id="header" >
    <img id="logo1" src="media/logo1.png"/>
    <img id="logo2" src="media/logo2.png"/>
</div>

Тогда в вашем CSS:

#header     { position: relative; height: 200px}
#header img { position: absolute; bottom: 0; left: 0}
#logo2      { left: auto; right: 0}

Или . Если ваш заголовок имеет высоту logo1.png, используйте вместо этого этот CSS:

#header     { position: relative;}
#logo2      { position: absolute; bottom: 0; right: 0}

Это заставит logo1 установить высоту header, а logo2 будет просто сидеть внизу header и справа.

Answer 2

Вы можете использовать свойство margin-top в дочерних элементах div:

<div id="header" >
        <div style="float:left; margin-top:20px" >
            <img src="media/logo1.png"/>
        </div>
        <div style="float:right; margin-top:20px" >
            <img src="media/logo2.png"/>
        </div>
    </div>

Answer 3

попробуйте этот CSS

#header {width: 980px; position: relative; height: 300px;}
#header .left {position: absolute; bottom: 0; left: 0;}
#header .right {position: absolute; bottom: 0; right: 0;}

и код

<div id="header">
  <div class="left">
      <img src="img1.jpg"/>
  </div>
  <div class="right">
      <img src="img2.jpg"/>
  </div>
</div>