css - span - ¿Cómo hacer que un elemento de bloque en línea llene el resto de la línea?
span html para que sirve (5)
Compatible con los navegadores modernos comunes (IE 8+): http://jsfiddle.net/m5Xz2/3/
.lineContainer {
display:table;
border-collapse:collapse;
width:100%;
}
.lineContainer div {
display:table-cell;
border:1px solid black;
height:10px;
}
.left {
width:100px;
}
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>
¿Es posible tal cosa usando CSS y dos etiquetas DIV de bloque en línea (o lo que sea) en lugar de usar una tabla?
La versión de la tabla es esta (se agregaron bordes para que pueda verla):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>
Produce una columna izquierda con un ANCHO FIJO (no un ancho porcentual) y una columna derecha que se expande para llenar EL ESPACIO RESTANTE en la línea. Suena bastante simple, ¿verdad? Además, dado que nada se "flota", la altura del contenedor principal se expande adecuadamente para abarcar la altura del contenido.
--BEGIN RANT--
He visto las implementaciones de "corrección clara" y "Santo Grial" para diseños de columnas múltiples con columna lateral de ancho fijo, y son una mierda y son complicadas. Invierten el orden de los elementos, usan anchos de porcentaje o usan flotantes, márgenes negativos, y la relación entre los atributos "izquierda", "derecha" y "margen" es compleja. Además, los diseños son sensibles al subpíxel, por lo que la adición de un solo píxel de bordes, relleno o márgenes romperá todo el diseño y enviará columnas completas a la siguiente línea. Por ejemplo, los errores de redondeo son un problema incluso si intenta hacer algo simple, como poner 4 elementos en una línea, con el ancho de cada uno configurado en 25%.
--END RANT--
He intentado usar "inline-block" y "white-space: nowrap;", pero el problema es que simplemente no puedo obtener el segundo elemento para llenar el espacio restante en la línea. Establecer el ancho a algo así como "ancho: 100% - (LeftColumWidth) px" funcionará en algunos casos, pero realizar un cálculo en una propiedad de ancho realmente no es compatible.
Cuando cedes los bloques en línea
.post-container {
border: 5px solid #333;
overflow:auto;
}
.post-thumb {
float: left;
display:block;
background:#ccc;
width:200px;
height:200px;
}
.post-content{
display:block;
overflow:hidden;
}
http://jsfiddle.net/RXrvZ/3731/
(desde CSS Float: flotando una imagen a la izquierda del texto )
Si no puede usar el overflow: hidden (porque no desea el overflow: hidden ) o si no le gustan los ataques / soluciones temporales de CSS, puede usar JavaScript en su lugar. Tenga en cuenta que puede no funcionar tan bien porque es JavaScript.
var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}
.lineContainer {
width: 100% border: 1px solid #000;
font-size: 0px;
/* You need to do this because inline block puts an invisible space between them and they won''t fit on the same line */
}
.lineContainer div {
height: 10px;
display: inline-block;
}
.left {
width: 100px;
background: red
}
.right {
background: blue
}
<div class="lineContainer">
<div class="left"></div>
<div class="right"></div>
</div>
Una solución moderna que usa flexbox:
.container {
display: flex;
}
.container > div {
border: 1px solid black;
height: 10px;
}
.left {
width: 100px;
}
.right {
width: 100%;
background-color:#ddd;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
Ver: http://jsfiddle.net/qx32C/36/
.lineContainer {
overflow: hidden; /* clear the float */
border: 1px solid #000
}
.lineContainer div {
height: 20px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>
¿Por qué reemplacé margin-left: 100px con overflow: hidden en .right ?
EDITAR: Aquí hay dos espejos para el enlace anterior (muerto):