Как бы вы разместили эти изображения?

Question

http://elektrikhost.com/

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

HTML:

<section class="starter">
 <img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
  <h2>Starter Plan</h2>
  <ul>
    <li><span>5GB Disk Space</span></li>
    <li><span>Unmetered Bandwidth</span></li>
    <li><span>Unlimited Add-on Domains</span></li>
    <li><span>Unlimited Subdomains</span></li>
    <li><span>Unlimited Email/FTP Accounts</span></li>
    <li><span>Unlimited MySQL Databases</span></li>
    <li><span>Shell access upon request</span></li>
  </ul>
  <img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.starter -->

.plan-icon - это изображение.Должен выглядеть так:

Answer 1

Вы можете просто установить стиль изображения на float: right

Answer 2

.starter { position: relative; }
.starter img { position: absolute; top: 5px; left: 140px; }

Идея состоит в том, что изображение позиционируется как «абсолютное», поэтому оно может находиться где угодно в пределах родительского элемента «.starter».Это не будет работать, если для «.starter» не установлено относительное значение.

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

Answer 3

Если бы это был я, я бы добавил этот CSS.

#plans-wrap section { position: relative; }
#plans-wrap section  .icon { position: absolute; right: 0px; top: 0px; }

Answer 4

Используйте относительное позиционирование.Вы также можете дать ему z-index, чтобы поместить его "поверх" любых элементов.

В любом случае, посмотрите на эту страницу.Это должно помочь вам:

http://w3schools.com/CSS/css_positioning.asp

Answer 5

попробуй

<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon" style="float:right;">

Я бы даже предложил добавить к этому padding: 5px 5px;, но это только я ...