Como colocar duas imagens dentro de uma list

[edevaldo 0]

estou usando o exemplo abaixo e consigo colocar uma imagem no list

<div class="list">

<a class="item item-avatar" href="#">
<img src="venkman.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>

mas eu preciso que o list fique com duas imagens

uma a direita do list e outra a esquerda. e dai nao tenho a minima ideia de como se faz isto

é pra colocar o placar de jogos do brasileirao tipo assim

imagem palmeiras x sao paulo imagem

[Lucas Santos Brito 12]

Creio que seja mais ou menos isso que tu quer:

CSS:

.item {
  padding-left: 15px;
  padding-right: 15px;
}
.item, .item-separator, .item-img, .item-desc {
  display: inline-block;
}
.item, .item-separator {
  vertical-align: middle;
}
.item-img, .item-desc {
  vertical-align: top;
}
.item-desc-txt-right {
  text-align: right;
}

HTML:

<div class="list">
  <a class="item" href="#">
    <div class="item-img">
      <img src="http://lorempixel.com/output/abstract-q-g-150-150-6.jpg" width="50" height="50">
    </div>
    <div class="item-desc item-desc-txt-right">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </div>
  </a><!-- /.item-1 !-->
  <div class="item-separator">
    <h2>X</h2>
  </div>
  <a class="item" href="#">
    <div class="item-desc">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </div>
    <div class="item-img">
      <img src="http://lorempixel.com/output/abstract-q-g-150-150-6.jpg" width="50" height="50">
    </div>
  </a><!-- /.item-2 !-->
</div><!-- /.list !-->

Codepen: http://codepen.io/lucaslsb/pen/NbjGdr

Para entender o que foi feito, leia mais sobre a propriedade display.

Leituras sugeridas:

HTML Básico

CSS Básico

Propriedade Display

[edevaldo 0]

Creio que seja mais ou menos isso que tu quer:

CSS:

.item {
  padding-left: 15px;
  padding-right: 15px;
}
.item, .item-separator, .item-img, .item-desc {
  display: inline-block;
}
.item, .item-separator {
  vertical-align: middle;
}
.item-img, .item-desc {
  vertical-align: top;
}
.item-desc-txt-right {
  text-align: right;
}

HTML:

<div class="list">
  <a class="item" href="#">
    <div class="item-img">
      <img src="http://lorempixel.com/output/abstract-q-g-150-150-6.jpg" width="50" height="50">
    </div>
    <div class="item-desc item-desc-txt-right">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </div>
  </a><!-- /.item-1 !-->
  <div class="item-separator">
    <h2>X</h2>
  </div>
  <a class="item" href="#">
    <div class="item-desc">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </div>
    <div class="item-img">
      <img src="http://lorempixel.com/output/abstract-q-g-150-150-6.jpg" width="50" height="50">
    </div>
  </a><!-- /.item-2 !-->
</div><!-- /.list !-->

Codepen: http://codepen.io/lucaslsb/pen/NbjGdr

Para entender o que foi feito, leia mais sobre a propriedade display.

Leituras sugeridas:

HTML Básico

CSS Básico

Propriedade Display

Boa noite lucas santos:

Muito obrigado pela resposta, eu estou testando e estudando sobre css html e ta tudo muito no começo na verdade eu estou usando o framework ionic angular e nao consegui fazer isto la ai resolvi perguntar aqui como seria isto em html.

muito obrigado pela resposta, so fiquei com duvida onde colocar aquele codigo do css.

[edevaldo 0]

Boa noite lucas santos:

Muito obrigado pela resposta, eu estou testando e estudando sobre css html e ta tudo muito no começo na verdade eu estou usando o framework ionic angular e nao consegui fazer isto la ai resolvi perguntar aqui como seria isto em html.

muito obrigado pela resposta, so fiquei com duvida onde colocar aquele codigo do css.

Eu fiz um desenho no paint bem tosco kkkk que mostra o que eu quero fazer

https://mega.nz/#!JJRQRAQZ!7ETDU6RnGfwxqOw3momqE49bJBEO9AAPhOutDayjLzw