Posicionar varios elementos a la derecha de una columna

I want to position one element at the left of a column, and three elements pushed together at the right.

ie, to look like this:

|item1                   item2 item3 item4|

(In the original problem, the column is a span on the top of several columns)

Esto funciona:

table {
    width:10cm;
}
.push-left{
    display:inline-block;
    float:left;
}
.push-right{
    display:inline-block;
    float:right;
    padding:0 5px 0 5px;
}

<table>
<tr>
<td>
<div class="push-left">item1</div>
<div class="push-right">item4</div>
<div class="push-right">item3</div>
<div class="push-right">item2</div>
</td>
</tr>
</table>

Please note that the float:right items need to be placed in reverse order in the html.

¿Hay una mejor manera?

preguntado el 22 de mayo de 12 a las 11:05

2 Respuestas

put item2 - item3 - item4 in a wrapper, and float the wrapper.

.inline{
  display:inline-block;
  padding:0 5px 0 5px;
}
.push-right{
    float:right;
}


<div class="push-right">
  <div class="inline">item2</div>
  <div class="inline">item3</div>
  <div class="inline">item4</div>
</div>

And whenever you make a element float, it will wrapped up to its content, no display: inline-block necesario.

contestado el 22 de mayo de 12 a las 11:05

Thankyou for pointing out that the display:inline-block in my original is redundant. I've removed it from mine, and seen that it makes no difference. - Esteban Hosking

Put the first item in a separate cell of the table and the three other items to another cell. Right-align the second cell.

If the actual table has more rows than shown in your code, you may need to modify the table structure by adding new cells and/or colspan los atributos.

contestado el 22 de mayo de 12 a las 11:05

Thanks. Yes, the table has more rows, and this is a colspan. It is much more convenient to keep it as one column, and use CSS to move the elements. - Esteban Hosking

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.