Saltar al contenido

¿Cómo forzar a los divs en línea a permanecer en la misma línea?

Esta es la solución más válida que te podemos compartir, sin embargo mírala detenidamente y valora si se puede adaptar a tu proyecto.

Solución:

Aquí hay un método usando inline-block para la izquierda y el medio y position:absolute para el elemento correcto.

Ejemplo

jsviolín

HTML

left
Some really long text in the center. Some really long text in the center.
right

CSS

html, body 
    margin: 0px;
    padding: 0px;

#parent 
    background-color: #eee;
    height: 48px;
    position:relative;
    overflow:hidden;
    white-space: nowrap;

#colLeft 
    background-color: #ff8b8b;
    height: 48px;
    display: inline-block;

#colCenter 
    background-color: orange;
    height: 48px;
    display: inline-block;
    overflow: hidden;

#colRight 
    background-color: #c3d0ff;
    height: 48px;
    display: inline;
    float: right;
    position:absolute;
    top:0;
    right:0;

Ya que se basa en inline-blockhay un comentario entre el

s para deshacerse del espacio ilustrado en esta imagen:

Espaciado feo

desbordamiento de texto: puntos suspensivos

Para lograr esto al usar text-overflow:ellipsis es posible que deba recurrir a JavaScript, aquí hay una posible solución (jsFiddle).

Puntos suspensivos usando JavaScript

window.onresize = updateDimensions;

function updateDimensions() 
    var parent = document.getElementById('parent');
    var left = document.getElementById('colLeft');
    var right = document.getElementById('colRight');
    var middle = document.getElementById('colCenter');

    middle.style.width = (parent.offsetWidth - right.offsetWidth - left.offsetWidth)  + 'px';

Si está abierto a algunos cambios de HTML, esto debería darle exactamente lo que desea:

left
right
Some really long text in the center. Some really long text in the center.

y css para ser:

html, body 
  margin: 0px;
  padding: 0px;

#parent 
  background-color: #eee;
  height: 48px;

#colLeft 
  background-color: #ff8b8b;
  height: 48px;
  float: left;

#colwrap
    overflow:hidden;
    background-color: orange;      

#colCenter 
  height: 48px;  

#colRight 
  background-color: #c3d0ff;
  height: 48px;
  float: right;

jsFiddle: http://jsfiddle.net/gajbhiye/ZX97K/ Espero que ayude.

Engañe al navegador diciendo que todo encaja bien en una sola línea agregando algunos márgenes grandes a los elementos del centro y la derecha, y compénselo con un posicionamiento relativo. Ver violín actualizado.

Marcado: permanece intacto.

Estilo:

#parent 
  background-color: #eee;
  height: 48px;
  overflow: hidden;

#colLeft 
  background-color: #ff8b8b;
  height: 48px;
  float: left;

#colCenter 
  background-color: orange;
  height: 48px;
  float: left;
  margin-left: -2000px;
  position: relative;
  left: 2000px;

#colRight 
  background-color: #c3d0ff;
  height: 48px;
  float: right;
  margin-right: -2000px;
  position: relative;
  left: -2000px;

Te invitamos a confirmar nuestro ensayo ejecutando un comentario o dejando una puntuación te lo agradecemos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *