1

Eu estou tendo um probleminha meio chato com minha td eu quero posicionar as letras junto a imagem..., igual a da direita porem ela não segue o comando do text-align: right;

Imagem Original do problema

.pvsp {
    width: 335px;
    float: right;
    background: #252525;
}

.result-battle{
    width: 147.5px;
    height: 75px;
}

.detail-player {
    display: inline-block;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

.detail-player, .player-name {
    text-shadow: 0 1px 0 #171717;
    color: #908f8f;
}

.result-w {
    text-rendering: optimizelegibility;
    text-shadow: 0 0 7.4px rgba(92, 198, 149, 0.26);
    color: #4fc18c;
    text-transform: uppercase;
    font-size: 10px;
}

.result-l {
    text-rendering: optimizelegibility;
    color: #f63358;
    text-transform: uppercase;
    font-size: 10px;
}

.result-img-left {
    float: right !important;
}

.result-img-right {
    float: left;
}

.winner {
    background-image:url(../imgs/border-green.png);
    width: 57px;
    height: 57px;
}

.winner img {
    width: 30px;
    height: 30px;
    display: block;
    margin: 13px 13px auto;
}

.detail-kd {
    color: #555;
    font-size: 8pt;
}

.detail-kd b {
    color: #979797;
}
.title_sidebar1 {
padding: 20px;
margin-left: 10px;
color: #e6e6e6;
font-size: 10pt;
font-weight: 700;
}
.player-name {
font-size: 10pt;
font-weight: 750;
}
<div class="pvsp">
                    <div class="title_sidebar1">PLAYES VS PLAYER</div>
                <hr class="vdivider-black" />
                    <table class="battle-players">
                        <tbody>
                            <tr>
                                <td class="result-battle">
                                    <div class="detail-player align-right">
                                        <span class="result-w">winner</span>
                                        <p class="player-name">Laurent</p>
                                        <p class="detail-kd"><b>KD</b> 1.11</p>
                                    </div>
                                    <div class="result-img-left winner">
                                       <img src="https://via.placeholder.com/30">
                                    </div>
                                </td>
                                
                                <td style="text-align: center;" width="40px">vs</td>
                                
                                <td class="result-battle">
                                    <div class="detail-player align-left">
                                        <span class="result-w">winner</span>
                                        <p class="player-name">Laurent</p>
                                        <p class="detail-kd"><b>KD</b> 1.11</p>
                                    </div>
                                    <div class="result-img-right winner">
                                       <img src="https://via.placeholder.com/30">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

2 Respostas 2

2

Seu problema está mais com o HTML e a ordem dos elementos do que com o CSS, a minha dica é vc colocar float:right tanto na imagem quanto na div com o texto.

Só que pra isso vc precisa no HTML colocar a <div class="result-img-left winner"> antes da <div class="detail-player align-right result-img-left"> Inclusive como vc já tinha uma classe CSS só com float:right eu usei ela mesmo para fazer esse ajusta repare que essa última div eu coloquei a classe result-img-left

Veja como ficou para entender melhor. Repito que não precisei colocar nada no CSS, apenas mudei a ordem do Texto e Imagem no HTML e coloquei a classe result-img-left que vc já tinha no seu código. Repare que quando vc usa float:right o primeiro elemento a receber esse float sempre vai ser o elemento que vai ficar mais a direita, por isso inverti a ordem colocando a imagem antes do texto, assim ela fica como primeiro elemento a direita e o texto que tb tem float flutua ao lado dela na posição correta.

.pvsp {
  width: 335px;
  float: right;
  background: #252525;
}

.result-battle {
  width: 147.5px;
  height: 75px;
}

.detail-player {
  display: inline-block;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

.detail-player,
.player-name {
  text-shadow: 0 1px 0 #171717;
  color: #908f8f;
}

.result-w {
  text-rendering: optimizelegibility;
  text-shadow: 0 0 7.4px rgba(92, 198, 149, 0.26);
  color: #4fc18c;
  text-transform: uppercase;
  font-size: 10px;
}

.result-l {
  text-rendering: optimizelegibility;
  color: #f63358;
  text-transform: uppercase;
  font-size: 10px;
}

.result-img-left {
  float: right !important;
}

.result-img-right {
  float: left;
}

.winner {
  background-image: url(../imgs/border-green.png);
  width: 57px;
  height: 57px;
}

.winner img {
  width: 30px;
  height: 30px;
  display: block;
  margin: 13px 13px auto;
}

.detail-kd {
  color: #555;
  font-size: 8pt;
}

.detail-kd b {
  color: #979797;
}

.title_sidebar1 {
  padding: 20px;
  margin-left: 10px;
  color: #e6e6e6;
  font-size: 10pt;
  font-weight: 700;
}

.player-name {
  font-size: 10pt;
  font-weight: 750;
}
<div class="pvsp">
  <div class="title_sidebar1">PLAYES VS PLAYER</div>
  <hr class="vdivider-black" />
  <table class="battle-players">
    <tbody>
      <tr>
        <td class="result-battle">
          <div class="result-img-left winner">
            <img src="https://via.placeholder.com/30">
          </div>
          <div class="detail-player align-right result-img-left">
            <span class="result-w">winner</span>
            <p class="player-name">Laurent</p>
            <p class="detail-kd"><b>KD</b> 1.11</p>
          </div>
        </td>

        <td style="text-align: center;" width="40px">vs</td>

        <td class="result-battle">
          <div class="detail-player align-left">
            <span class="result-w">winner</span>
            <p class="player-name">Laurent</p>
            <p class="detail-kd"><b>KD</b> 1.11</p>
          </div>
          <div class="result-img-right winner">
            <img src="https://via.placeholder.com/30">
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>


Exemplo didático sobre o float:right

Repare que no HTML a div 1 é a primeira e a div 4 a última, porém é a div 1 que fica mais a direita. Por isso sua imagem deve vir primeiro para ficar mais a direita, depois o texto para ficar ao lado da imagem direitinho

Exiba o código abaixo para ver o exemplo

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  float: right;
}
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

1

Use flex-box jovem!

.result-battle:first-child {
  display: flex;
  justify-content: flex-end;
}
1
  • 2
    A regra CSS para resolver com flexbox é: .result-battle:first-child { display:flex; justify-content: flex-end ; }
    – Maujor
    11/12/2018 às 12:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .