dos divs la misma línea, una anchura dinámico, uno fijo

He dos divs menores de uno de los padres div, el div padre tiene 100% anchura:dos divs la misma línea, una anchura dinámico, uno fijo

<div id="parent"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div>

Las condiciones son:

I quiero dos divs en la misma línea.
El div correcto puede o no estar presente. Cuando está presente, quiero que siempre esté fijo a la derecha. Sin embargo, el div izquierdo debe ser elástico, su ancho depende de su contenido.

He intentado tanto float: left, and dispaly: inline-block, pero ninguna de las soluciones parece funcionar.

Cualquier sugerencia sería apreciada.

Fuente

2011-05-19 bingjie2680

me gustaría ir con display: table-cell respuesta @ de Sandeep si no se preocupan por IE7.

De lo contrario, aquí hay una alternativa, con un inconveniente: el "derecho" div tiene que estar primero en el HTML.

Ver:http://jsfiddle.net/thirtydot/qLTMf/
y exactamente lo mismo, pero con la "derecha div" eliminado: http://jsfiddle.net/thirtydot/qLTMf/1/

#parent { 
    overflow: hidden; 
    border: 1px solid red 
} 
.right { 
    float: right; 
    width: 100px; 
    height: 100px; 
    background: #888; 
} 
.left { 
    overflow: hidden; 
    height: 100px; 
    background: #ccc 
} 
<div id="parent"> 
    <div class="right">right</div> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div> 
</div>

Fuente

2011-05-19 10:47:36 thirtydot

conozco ese truco y es genial http://htmldog.com/ también se implementa en su propio sitio web, pero quiero hacerlo de acuerdo con @Yijie marcado dado – sandeep

@sandeep: Sí, estoy de acuerdo. Hubiera publicado una respuesta basada en 'display: table-cell' si aún no lo hubieras hecho. – thirtydot

@thriydot; también se merece +1 también – sandeep

@Yijie; Compruebe el enlace tal vez eso es que desea http://jsfiddle.net/sandeep/NCkL4/7/

EDITAR:

http://jsfiddle.net/sandeep/NCkL4/8/

Fuente

2011-05-19 10:11:29 sandeep

Eso no es lo que quería el póster. Si quita el div correcto, dejará espacio en blanco, porque usó relleno para mantener la distancia del contenido. – DarthJDG

deja espacio en blanco cuando se elimina la div derecha ... – bingjie2680

@darthJDG & Yijie Li revisa mi nueva jsfiddle tal vez así lo desees – sandeep

Así izquierda div estilo depende de la presencia de div derecha. No puedo pensar en un selector CSS que permita ese tipo de comportamiento todavía.

Por lo tanto, me parece que necesitará agregar mediante programación un lado del servidor de clase (o en JS) en el div principal o en el div izquierdo para hacer eso.

<div id="parent twocols"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div>

<div id="parent"> 
    <div class="left"></div> 
</div>

estilo Así que justo es siempre:

.right { 
    float: right; 
    width: 200px; /* or whatever value you need */ 
    /* margin and padding at your discretion */ 
}

e izquierda estilo es:

.parent.twocols .left { 
    margin-right: 200px; /* according to right div width + margin + padding*/ 
}

Fuente

2011-05-19 10:12:46

cuando se utiliza .left {margin-right: 200px} si el derecho no es div presente. dejará un espacio en blanco. ¿no? – bingjie2680

No estoy usando '.left {margin-right: 200px}' pero '.parent.twocols .left {margin-right: 200px}' para incluir solo este margen cuando la columna de la derecha está presente como lo indican los '.twocols 'clase adicional –

-1

Creo que esto es lo que quiere:

<html> 
<head> 
<style type="text/css"> 
#parent 
{width:100%; 
height:100%; 
border:1px solid red; 
} 
.left 
{ 
float:left; 
width:40%; 
height:auto; 
border:1px solid black; 
} 
.right 
{ 
    float:left; 

width:59%; 
height:auto; 
border:1px solid black; 
} 
</style> 
</head> 
<body> 
<div id="parent"> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
    <div class="right">This is the right side content</div> 
</div> 
</body> 
</html>

Aquí está la demostración: http://jsfiddle.net/anish/aFBmN/

Fuente

2011-05-19 10:19:14 Anish

Eso no es lo que quería el poster. El lado derecho no es de tamaño fijo, y si quitas el div correcto deja espacio en blanco. – DarthJDG

gracias, pero el mismo problema para 3 respuestas ,,, cuando eliminas div derecha, deja espacio en blanco ... supongo que usaré script en su lugar ... – bingjie2680

HTML:

<div id="parent"> 
    <div class="right"></div> 
    <div class="left"></div> 
</div>

(div.right tiene que ser antes div.que queda en el marcado HTML)

CSS:

.right { 
float:right; 
width:200px; 
}

Fuente

2011-05-19 10:51:35

esta es una idea interesante. pero no funciona, cuando el div izquierdo ocupa toda la línea, cae bajo el div correcto. – bingjie2680

que he tenido éxito con el uso de espacio en blanco: nowrap; en el contenedor externo, pantalla: bloque en línea; en los contenedores internos, y luego (en mi caso, ya que quería el segundo para ajustar la palabra) espacio en blanco: normal; en los interiores.

Fuente

2014-03-03 11:03:09

dos divs la misma línea, una anchura dinámico, uno fijo

Respuesta

Cuestiones relacionadas