significado - span html para que sirve

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

Question

Estoy tratando de hacer un diseño de tres columnas. Me gustaría que el ancho de las columnas izquierda y derecha sea tan amplio como el contenido de sus hijos. Me gustaría que la columna central se expanda para llenar el espacio restante.

Estoy intentando lo siguiente (descripción general, enlace jsfiddle incluido a continuación):

#colLeft {
  display: inline;
  float: left;
}
#colCenter {
  float: left;
  display: inline;
  overflow: none;
  white-space: nowrap;
}
#colRight {
  display: inline;
  float: right;
}

<div id="parent" style="width:100%">
  <div id="colLeft">left</div>
  <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
  <div id="colRight">right</div>
</div>

violín: http://jsfiddle.net/5kszQ/

pero la columna central empuja la columna de la derecha debajo de ella cuando su contenido es demasiado largo. Me gustaría que las tres columnas estuvieran alineadas, y hacer que la columna central se encoja según sea necesario. Esto es lo que me está dando lo de arriba:

en cambio, me gustaría:

Gracias por cualquier ayuda

Answer 1

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

jsFiddle

HTML

<div id="parent" style="width:100%">
    <div id="colLeft">left</div><!--
    --><div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
    <div id="colRight">right</div>
</div>

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;
}

Como se basa en inline-block en inline-block , hay un comentario entre los <div> s para eliminar el espacio ilustrado en esta imagen:

desbordamiento de texto: puntos suspensivos

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

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'';
}

Answer 2

Engañe al navegador diciendo que todo encaja perfectamente en una sola línea agregando algunos márgenes grandes a los elementos central y derecho, y compense eso con un posicionamiento relativo. Ver el 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;
}

Answer 3

Si está abierto para algunos cambios HTML, entonces esto debería darle exactamente lo que quiere:

<div id="parent" style="width:100%">  
  <div id="colLeft">left</div>
  <div id="colwrap">
      <div id="colRight">right</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>  
    </div>
</div>

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.

Answer 4

Solo prueba esto

<html>
<head>
    <style type="text/css">
        #parent {
          word-break:break-all;
        }
        #colLeft {
          float:left;
          max-width: 5%;
        }
        #colCenter {
          float:left;
          max-width: 90%;
        }
        #colRight {
          float: right;
          max-width: 5%;
        }
    </style>
</head>
<body>
    <div id="parent" style="width:100%">
      <div id="colLeft">leftawefawefawefawef</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjl</div>
      <div id="colRight">rightaewfaewfawefawef</div>
    </div>
</body>

Answer 5

USO PORCENTUAL - Puede mantener un diseño limpio si solo piensa en porcentajes. Un flotador o bloque en línea nunca irá a la siguiente línea si tiene espacio suficiente en la página.

Los elementos exteriores tienen un ancho del 20% y el medio tiene un ancho del 50%. Esto suma hasta el 90% de la página para que no se desborde. Puede ser más preciso para llenar la página si eso es lo que se desea, pero debe tener en cuenta el relleno y los márgenes que pueden arruinar su diseño.

Aquí está un fidde: https://jsfiddle.net/VVarPiglet/Lsy2rquk/

<div class="parent">
<div class="subParenet">
<div class="left outer inlineBlock">
    <img class="image" src="http://alexoliveira.me/Hawaii/images/chevron- left.png" />
</div>
<div class="middle inlineBlock"></div>
<div class="right outer inlineBlock">
  img class="image" src="http://alexoliveira.me/Hawaii/images/chevron-left.png" />
</div>
</div>
</div>

CSS

.inlineBlock{
  display: inline-block;
}
.middle{
  background: blue;
  width: 50%;
  height: 215px;
}
.image{
  width:100%;
}
.outer{
  background: red;
  width: 20%;
}
.subparent{
  display: inline-block;
  width:100%;
}