Estoy haciendo un esfuerzo para obtener el siguiente trabajo con css (ancho de tamaño):
Tengo 4 divs dentro de otro div. Dos de los dos divs, 1st y 3d, tienen un texto y son de tamaño fijo (no lo sabemos de antemano). Los otros dos divs, A y B, deberían llevar a cada uno el 50% del espacio restante. .
Idealmente con un min. Anchura, que hace que las casillas 2 y 3 vayan a una nueva línea.
¿Es esto posible con css puro?
Respuestas
0 para la respuesta № 1Si utiliza calc() función tal vez puedas. Si no puedes con eso, puedes probar con flexbox Pero es menos compatible con los navegadores más antiguos.
.content {
font-size: 0;
}
.content > * {
font-size: 16px;
}
.fixed {
width: 50px;
}
.a, .b, .c, .d {
display: inline-block;
vertical-align:top;
}
.b, .d {
width: calc(50px - 50px - 50%);
}
Esto significa que .b, .d los tamaños son .a - .c - 50%
Buena suerte
0 para la respuesta № 2
Creo que esto es lo que buscas?
Aquí hay un enlace a una instancia en vivo de él -> https://jsfiddle.net/ehnuzyo7/
// HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div>Variable Size</div>
<div class="fixed">A</div>
<div>Variable Size</div>
<div class="fixed">B</div>
</div>
</body>
</html>
// CSS
body{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
margin: 0 !important;
width: 100vw;
height: 100vh;
}
#container{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-self: center;
align-self: center;
width: 600px;
background: #ccc;
border: 2px solid black;
}
#container>div{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex: 1;
flex: 1;
-webkit-align-self: center;
align-self: center;
background: #5c5c5c;
color: #fff;
margin: 5px;
}
.fixed{
max-width: 50px;
}