porque no funciona css en chrome
ya que no se que hacer ojala puedan ayudarme un saludo.
ya que no se que hacer ojala puedan ayudarme un saludo.
ya que no se que hacer ojala puedan ayudarme un saludo.
ya que no se que hacer ojala puedan ayudarme un saludo.
Hola @sebastiancruzgomez ,¿qué tal? 😃 Será más fácil ayudarte si colocas el código que estás utilizando
ok
html
<!DOCTYPE html>
<html lang="es">
<head> <meta charset="UTF-8"> <title>Calaculdora</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/estilos.css"> <script defer src="js/main.js"></script> </head>
<body> <div class="contenedor-main"> <header class="main-header"> <h1>Calaculdora</h1> </header> <fieldset class="caja-detos"> <legend>Ingrear Detos</legend> <div class="caja-input"> <label for="txtnum1" class="lbe-numero">Numero 1</label> <input type="text" id="txtnum1" class="txtnum" autocomplete="off"> <label for="txtnum2" class="lbe-numero">Numero 2</label> <input type="text" id="txtnum2" class="txtnum" autocomplete="off"> </div> <div class="contenedor-botnes"> <button type="button" id="btn-calcular" class="btn-gral">calcular</button> <button type="button" id="btn-limpiar" class="btn-gral">limpiar</button> </div> </fieldset> <fieldset class="contenedor-resuls"> <legend>Resultados</legend> <div class="caja-lbe"> <label class="lbe-resul">Suma</label> <div class="caja-resul"> <label id="lbesuma" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">Resta</label> <div class="caja-resul"> <label id="lberesta" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">Multiplicacion</label> <div class="caja-resul"> <label id="lbemult" class="lbe-resul">00</label> </div> </div> <!-- 3 x 2 --> <div class="caja-lbe"> <label class="lbe-resul">Division</label> <div class="caja-resul"> <label id="lbedivis" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">Raiz</label> <div class="caja-resul"> <label id="lberaiz" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">potencia</label> <div class="caja-resul"> <label id="lbepot" class="lbe-resul">00</label> </div> </div> </fieldset> </div> </body>
</html>
css
/* estilos generales inicializar de main /
html {
box-sizing: border-box;
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
background: #999;
}
,::after,::before {
padding: 0;
margin: 0;
box-sizing: inherit;
}
h1{
text-align: center;
font-size: 2em;
}
fieldset{
border: 2px solid black;
}
legend{
font-size: 2em;
}
.caja-detos,.contenedor-resuls {
display: flex;
flex-direction: column;
margin: 0 5px;
/* este codigo es temporal */
padding: 0 10px;
}
.caja-input,.contenedor-botnes {
display: flex;
flex-direction: column;
}
.lbe-numero {
font-size: 32px;
margin-left: 20px;
}
.txtnum { width: 250px; height: 50px; margin: 20px; font-size: 40px; }
.btn-gral { height: 50px; flex: 1 1 auto; font-size: 33px; /* este codigo es temporal / margin: 5px; } / .caja-lbe { este codigo es temporal display: flex; } / .lbe-resul { font-size: 2em; } / .caja-resul { display: flex; justify-content: center; } / / inicio Media Queries / @media screen and (min-width: 768px) { .caja-detos { flex-direction: row; } .caja-input,.contenedor-botnes { flex: 1 1; } .contenedor-resuls { flex-direction: row; flex-wrap: wrap; } .caja-lbe { width: 50%; height: 85px; } } / final Media Queries */
Creo que el problema con Chrome es el fieldset. Una forma fácil de arreglarlo (y recomendable al usar flex) es agregar un contenedor para los el ementos que quieres que ocupen 50% cada uno. Un pequeño ejemplo.
<div class="contenedor"> <!-- Nuevo contenedor -->
<div class="caja-input">
<label for="txtnum1" class="lbe-numero">Numero 1</label>
<input type="text" id="txtnum1" class="txtnum" autocomplete="off">
<label for="txtnum2" class="lbe-numero">Numero 2</label>
<input type="text" id="txtnum2" class="txtnum" autocomplete="off">
</div>
<div class="contenedor-botnes">
<button type="button" id="btn-calcular" class="btn-gral">calcular</button>
<button type="button" id="btn-limpiar" class="btn-gral">limpiar</button>
</div>
</div>
.contenedor {
display: flex;
width: 100%;
/* en firefox sin especificar tamaño puede apretarse todo. */
}
También te recomendaria agregar mas contenedores por elementos agrupados. Por ejemplo la forma más facil de trabajar con flex es crear filas y columnas. (Clasico en frameworks tipo bootstrap y similares)
<div class="fila"> <!-- esto va a tener la propiedad display: flex-->
<label for="txtnum1" class="lbe-numero">Numero 1</label>
<input type="text" id="txtnum1" class="txtnum" autocomplete="off">
<!-- estos hijos van a tener un ancho especificado, por ejemplo 50% -->
</div>
@sebastiancruzgomez No abuses del uso del flex, saludos.
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Calaculdora</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="css/estilos.css" />
<script defer src="js/main.js"></script> -->
<style>
html {
box-sizing: border-box;
font-family: "Roboto", Arial, sans-serif;
font-size: 16px;
background: #999;
}
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: inherit;
}
h1 {
text-align: center;
font-size: 2em;
}
fieldset {
border: 2px solid black;
}
legend {
font-size: 2em;
}
.caja-detos,
.contenedor-resuls {
display: flex;
flex-direction: column;
margin: 0 5px; /* este codigo es temporal */
padding: 0 10px;
}
.contenedor-botnes {
display: flex;
flex-direction: column;
}
.lbe-numero {
font-size: 32px;
margin-left: 20px;
}
.txtnum {
width: 250px;
height: 50px;
margin: 20px;
font-size: 40px;
}
.btn-gral {
height: 50px;
flex: 1 1 auto;
font-size: 33px;
/* /estecodigo es temporal / */
margin: 5px;
}
.caja-lbe {
/* estecodigoestemporal */
display: flex;
}
.lbe-resul {
font-size: 2em;
}
.caja-resul {
display: flex;
justify-content: center;
}
.caja-detos > div:first-of-type {
display: flex;
}
/* /
/
inicio
Media
Queries
/
Este
usuario
no
existe */
[@media](https://ed.team/media) screen and (min-width: 768px) {
.caja-detos {
flex-direction: row;
}
.caja-input,
.contenedor-botnes {
flex: 1 1;
}
.contenedor-resuls {
flex-direction: row;
flex-wrap: wrap;
}
.caja-lbe {
width: 50%;
height: 85px;
}
}
</style>
</head>
<body>
<div class="contenedor-main">
<header class="main-header"><h1>Calaculdora</h1></header>
<fieldset class="caja-detos">
<legend>Ingrear Detos</legend>
<div>
<div class="caja-input">
<div>
<label for="txtnum1" class="lbe-numero">Numero 1</label>
<input
type="text"
id="txtnum1"
class="txtnum"
autocomplete="off"
/>
</div>
<div>
<label for="txtnum2" class="lbe-numero">Numero 2</label>
<input
type="text"
id="txtnum2"
class="txtnum"
autocomplete="off"
/>
</div>
</div>
<div class="contenedor-botnes">
<button type="button" id="btn-calcular" class="btn-gral">
calcular
</button>
<button type="button" id="btn-limpiar" class="btn-gral">
limpiar
</button>
</div>
</div>
</fieldset>
<fieldset class="contenedor-resuls">
<legend>Resultados</legend>
<div class="caja-lbe">
<label class="lbe-resul">Suma</label>
<div class="caja-resul">
<label id="lbesuma" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">Resta</label>
<div class="caja-resul">
<label id="lberesta" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">Multiplicacion</label>
<div class="caja-resul">
<label id="lbemult" class="lbe-resul">00</label>
</div>
</div>
<!-- 3 x 2 -->
<div class="caja-lbe">
<label class="lbe-resul">Division</label>
<div class="caja-resul">
<label id="lbedivis" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">Raiz</label>
<div class="caja-resul">
<label id="lberaiz" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">potencia</label>
<div class="caja-resul">
<label id="lbepot" class="lbe-resul">00</label>
</div>
</div>
</fieldset>
</div>
</body>
</html>
Hola @sebastiancruzgomez ,¿qué tal? 😃 Será más fácil ayudarte si colocas el código que estás utilizando
ok
html
<!DOCTYPE html>
<html lang="es">
<head> <meta charset="UTF-8"> <title>Calaculdora</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/estilos.css"> <script defer src="js/main.js"></script> </head>
<body> <div class="contenedor-main"> <header class="main-header"> <h1>Calaculdora</h1> </header> <fieldset class="caja-detos"> <legend>Ingrear Detos</legend> <div class="caja-input"> <label for="txtnum1" class="lbe-numero">Numero 1</label> <input type="text" id="txtnum1" class="txtnum" autocomplete="off"> <label for="txtnum2" class="lbe-numero">Numero 2</label> <input type="text" id="txtnum2" class="txtnum" autocomplete="off"> </div> <div class="contenedor-botnes"> <button type="button" id="btn-calcular" class="btn-gral">calcular</button> <button type="button" id="btn-limpiar" class="btn-gral">limpiar</button> </div> </fieldset> <fieldset class="contenedor-resuls"> <legend>Resultados</legend> <div class="caja-lbe"> <label class="lbe-resul">Suma</label> <div class="caja-resul"> <label id="lbesuma" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">Resta</label> <div class="caja-resul"> <label id="lberesta" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">Multiplicacion</label> <div class="caja-resul"> <label id="lbemult" class="lbe-resul">00</label> </div> </div> <!-- 3 x 2 --> <div class="caja-lbe"> <label class="lbe-resul">Division</label> <div class="caja-resul"> <label id="lbedivis" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">Raiz</label> <div class="caja-resul"> <label id="lberaiz" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">potencia</label> <div class="caja-resul"> <label id="lbepot" class="lbe-resul">00</label> </div> </div> </fieldset> </div> </body>
</html>
css
/* estilos generales inicializar de main /
html {
box-sizing: border-box;
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
background: #999;
}
,::after,::before {
padding: 0;
margin: 0;
box-sizing: inherit;
}
h1{
text-align: center;
font-size: 2em;
}
fieldset{
border: 2px solid black;
}
legend{
font-size: 2em;
}
.caja-detos,.contenedor-resuls {
display: flex;
flex-direction: column;
margin: 0 5px;
/* este codigo es temporal */
padding: 0 10px;
}
.caja-input,.contenedor-botnes {
display: flex;
flex-direction: column;
}
.lbe-numero {
font-size: 32px;
margin-left: 20px;
}
.txtnum { width: 250px; height: 50px; margin: 20px; font-size: 40px; }
.btn-gral { height: 50px; flex: 1 1 auto; font-size: 33px; /* este codigo es temporal / margin: 5px; } / .caja-lbe { este codigo es temporal display: flex; } / .lbe-resul { font-size: 2em; } / .caja-resul { display: flex; justify-content: center; } / / inicio Media Queries / @media screen and (min-width: 768px) { .caja-detos { flex-direction: row; } .caja-input,.contenedor-botnes { flex: 1 1; } .contenedor-resuls { flex-direction: row; flex-wrap: wrap; } .caja-lbe { width: 50%; height: 85px; } } / final Media Queries */
Creo que el problema con Chrome es el fieldset. Una forma fácil de arreglarlo (y recomendable al usar flex) es agregar un contenedor para los el ementos que quieres que ocupen 50% cada uno. Un pequeño ejemplo.
<div class="contenedor"> <!-- Nuevo contenedor -->
<div class="caja-input">
<label for="txtnum1" class="lbe-numero">Numero 1</label>
<input type="text" id="txtnum1" class="txtnum" autocomplete="off">
<label for="txtnum2" class="lbe-numero">Numero 2</label>
<input type="text" id="txtnum2" class="txtnum" autocomplete="off">
</div>
<div class="contenedor-botnes">
<button type="button" id="btn-calcular" class="btn-gral">calcular</button>
<button type="button" id="btn-limpiar" class="btn-gral">limpiar</button>
</div>
</div>
.contenedor {
display: flex;
width: 100%;
/* en firefox sin especificar tamaño puede apretarse todo. */
}
También te recomendaria agregar mas contenedores por elementos agrupados. Por ejemplo la forma más facil de trabajar con flex es crear filas y columnas. (Clasico en frameworks tipo bootstrap y similares)
<div class="fila"> <!-- esto va a tener la propiedad display: flex-->
<label for="txtnum1" class="lbe-numero">Numero 1</label>
<input type="text" id="txtnum1" class="txtnum" autocomplete="off">
<!-- estos hijos van a tener un ancho especificado, por ejemplo 50% -->
</div>
@sebastiancruzgomez No abuses del uso del flex, saludos.
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Calaculdora</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="css/estilos.css" />
<script defer src="js/main.js"></script> -->
<style>
html {
box-sizing: border-box;
font-family: "Roboto", Arial, sans-serif;
font-size: 16px;
background: #999;
}
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: inherit;
}
h1 {
text-align: center;
font-size: 2em;
}
fieldset {
border: 2px solid black;
}
legend {
font-size: 2em;
}
.caja-detos,
.contenedor-resuls {
display: flex;
flex-direction: column;
margin: 0 5px; /* este codigo es temporal */
padding: 0 10px;
}
.contenedor-botnes {
display: flex;
flex-direction: column;
}
.lbe-numero {
font-size: 32px;
margin-left: 20px;
}
.txtnum {
width: 250px;
height: 50px;
margin: 20px;
font-size: 40px;
}
.btn-gral {
height: 50px;
flex: 1 1 auto;
font-size: 33px;
/* /estecodigo es temporal / */
margin: 5px;
}
.caja-lbe {
/* estecodigoestemporal */
display: flex;
}
.lbe-resul {
font-size: 2em;
}
.caja-resul {
display: flex;
justify-content: center;
}
.caja-detos > div:first-of-type {
display: flex;
}
/* /
/
inicio
Media
Queries
/
Este
usuario
no
existe */
[@media](https://ed.team/media) screen and (min-width: 768px) {
.caja-detos {
flex-direction: row;
}
.caja-input,
.contenedor-botnes {
flex: 1 1;
}
.contenedor-resuls {
flex-direction: row;
flex-wrap: wrap;
}
.caja-lbe {
width: 50%;
height: 85px;
}
}
</style>
</head>
<body>
<div class="contenedor-main">
<header class="main-header"><h1>Calaculdora</h1></header>
<fieldset class="caja-detos">
<legend>Ingrear Detos</legend>
<div>
<div class="caja-input">
<div>
<label for="txtnum1" class="lbe-numero">Numero 1</label>
<input
type="text"
id="txtnum1"
class="txtnum"
autocomplete="off"
/>
</div>
<div>
<label for="txtnum2" class="lbe-numero">Numero 2</label>
<input
type="text"
id="txtnum2"
class="txtnum"
autocomplete="off"
/>
</div>
</div>
<div class="contenedor-botnes">
<button type="button" id="btn-calcular" class="btn-gral">
calcular
</button>
<button type="button" id="btn-limpiar" class="btn-gral">
limpiar
</button>
</div>
</div>
</fieldset>
<fieldset class="contenedor-resuls">
<legend>Resultados</legend>
<div class="caja-lbe">
<label class="lbe-resul">Suma</label>
<div class="caja-resul">
<label id="lbesuma" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">Resta</label>
<div class="caja-resul">
<label id="lberesta" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">Multiplicacion</label>
<div class="caja-resul">
<label id="lbemult" class="lbe-resul">00</label>
</div>
</div>
<!-- 3 x 2 -->
<div class="caja-lbe">
<label class="lbe-resul">Division</label>
<div class="caja-resul">
<label id="lbedivis" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">Raiz</label>
<div class="caja-resul">
<label id="lberaiz" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">potencia</label>
<div class="caja-resul">
<label id="lbepot" class="lbe-resul">00</label>
</div>
</div>
</fieldset>
</div>
</body>
</html>
Hola @sebastiancruzgomez ,¿qué tal? 😃 Será más fácil ayudarte si colocas el código que estás utilizando
ok
html
<!DOCTYPE html>
<html lang="es">
<head> <meta charset="UTF-8"> <title>Calaculdora</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/estilos.css"> <script defer src="js/main.js"></script> </head>
<body> <div class="contenedor-main"> <header class="main-header"> <h1>Calaculdora</h1> </header> <fieldset class="caja-detos"> <legend>Ingrear Detos</legend> <div class="caja-input"> <label for="txtnum1" class="lbe-numero">Numero 1</label> <input type="text" id="txtnum1" class="txtnum" autocomplete="off"> <label for="txtnum2" class="lbe-numero">Numero 2</label> <input type="text" id="txtnum2" class="txtnum" autocomplete="off"> </div> <div class="contenedor-botnes"> <button type="button" id="btn-calcular" class="btn-gral">calcular</button> <button type="button" id="btn-limpiar" class="btn-gral">limpiar</button> </div> </fieldset> <fieldset class="contenedor-resuls"> <legend>Resultados</legend> <div class="caja-lbe"> <label class="lbe-resul">Suma</label> <div class="caja-resul"> <label id="lbesuma" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">Resta</label> <div class="caja-resul"> <label id="lberesta" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">Multiplicacion</label> <div class="caja-resul"> <label id="lbemult" class="lbe-resul">00</label> </div> </div> <!-- 3 x 2 --> <div class="caja-lbe"> <label class="lbe-resul">Division</label> <div class="caja-resul"> <label id="lbedivis" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">Raiz</label> <div class="caja-resul"> <label id="lberaiz" class="lbe-resul">00</label> </div> </div> <div class="caja-lbe"> <label class="lbe-resul">potencia</label> <div class="caja-resul"> <label id="lbepot" class="lbe-resul">00</label> </div> </div> </fieldset> </div> </body>
</html>
css
/* estilos generales inicializar de main /
html {
box-sizing: border-box;
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
background: #999;
}
,::after,::before {
padding: 0;
margin: 0;
box-sizing: inherit;
}
h1{
text-align: center;
font-size: 2em;
}
fieldset{
border: 2px solid black;
}
legend{
font-size: 2em;
}
.caja-detos,.contenedor-resuls {
display: flex;
flex-direction: column;
margin: 0 5px;
/* este codigo es temporal */
padding: 0 10px;
}
.caja-input,.contenedor-botnes {
display: flex;
flex-direction: column;
}
.lbe-numero {
font-size: 32px;
margin-left: 20px;
}
.txtnum { width: 250px; height: 50px; margin: 20px; font-size: 40px; }
.btn-gral { height: 50px; flex: 1 1 auto; font-size: 33px; /* este codigo es temporal / margin: 5px; } / .caja-lbe { este codigo es temporal display: flex; } / .lbe-resul { font-size: 2em; } / .caja-resul { display: flex; justify-content: center; } / / inicio Media Queries / @media screen and (min-width: 768px) { .caja-detos { flex-direction: row; } .caja-input,.contenedor-botnes { flex: 1 1; } .contenedor-resuls { flex-direction: row; flex-wrap: wrap; } .caja-lbe { width: 50%; height: 85px; } } / final Media Queries */
Creo que el problema con Chrome es el fieldset. Una forma fácil de arreglarlo (y recomendable al usar flex) es agregar un contenedor para los el ementos que quieres que ocupen 50% cada uno. Un pequeño ejemplo.
<div class="contenedor"> <!-- Nuevo contenedor -->
<div class="caja-input">
<label for="txtnum1" class="lbe-numero">Numero 1</label>
<input type="text" id="txtnum1" class="txtnum" autocomplete="off">
<label for="txtnum2" class="lbe-numero">Numero 2</label>
<input type="text" id="txtnum2" class="txtnum" autocomplete="off">
</div>
<div class="contenedor-botnes">
<button type="button" id="btn-calcular" class="btn-gral">calcular</button>
<button type="button" id="btn-limpiar" class="btn-gral">limpiar</button>
</div>
</div>
.contenedor {
display: flex;
width: 100%;
/* en firefox sin especificar tamaño puede apretarse todo. */
}
También te recomendaria agregar mas contenedores por elementos agrupados. Por ejemplo la forma más facil de trabajar con flex es crear filas y columnas. (Clasico en frameworks tipo bootstrap y similares)
<div class="fila"> <!-- esto va a tener la propiedad display: flex-->
<label for="txtnum1" class="lbe-numero">Numero 1</label>
<input type="text" id="txtnum1" class="txtnum" autocomplete="off">
<!-- estos hijos van a tener un ancho especificado, por ejemplo 50% -->
</div>
@sebastiancruzgomez No abuses del uso del flex, saludos.
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Calaculdora</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="css/estilos.css" />
<script defer src="js/main.js"></script> -->
<style>
html {
box-sizing: border-box;
font-family: "Roboto", Arial, sans-serif;
font-size: 16px;
background: #999;
}
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: inherit;
}
h1 {
text-align: center;
font-size: 2em;
}
fieldset {
border: 2px solid black;
}
legend {
font-size: 2em;
}
.caja-detos,
.contenedor-resuls {
display: flex;
flex-direction: column;
margin: 0 5px; /* este codigo es temporal */
padding: 0 10px;
}
.contenedor-botnes {
display: flex;
flex-direction: column;
}
.lbe-numero {
font-size: 32px;
margin-left: 20px;
}
.txtnum {
width: 250px;
height: 50px;
margin: 20px;
font-size: 40px;
}
.btn-gral {
height: 50px;
flex: 1 1 auto;
font-size: 33px;
/* /estecodigo es temporal / */
margin: 5px;
}
.caja-lbe {
/* estecodigoestemporal */
display: flex;
}
.lbe-resul {
font-size: 2em;
}
.caja-resul {
display: flex;
justify-content: center;
}
.caja-detos > div:first-of-type {
display: flex;
}
/* /
/
inicio
Media
Queries
/
Este
usuario
no
existe */
[@media](https://ed.team/media) screen and (min-width: 768px) {
.caja-detos {
flex-direction: row;
}
.caja-input,
.contenedor-botnes {
flex: 1 1;
}
.contenedor-resuls {
flex-direction: row;
flex-wrap: wrap;
}
.caja-lbe {
width: 50%;
height: 85px;
}
}
</style>
</head>
<body>
<div class="contenedor-main">
<header class="main-header"><h1>Calaculdora</h1></header>
<fieldset class="caja-detos">
<legend>Ingrear Detos</legend>
<div>
<div class="caja-input">
<div>
<label for="txtnum1" class="lbe-numero">Numero 1</label>
<input
type="text"
id="txtnum1"
class="txtnum"
autocomplete="off"
/>
</div>
<div>
<label for="txtnum2" class="lbe-numero">Numero 2</label>
<input
type="text"
id="txtnum2"
class="txtnum"
autocomplete="off"
/>
</div>
</div>
<div class="contenedor-botnes">
<button type="button" id="btn-calcular" class="btn-gral">
calcular
</button>
<button type="button" id="btn-limpiar" class="btn-gral">
limpiar
</button>
</div>
</div>
</fieldset>
<fieldset class="contenedor-resuls">
<legend>Resultados</legend>
<div class="caja-lbe">
<label class="lbe-resul">Suma</label>
<div class="caja-resul">
<label id="lbesuma" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">Resta</label>
<div class="caja-resul">
<label id="lberesta" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">Multiplicacion</label>
<div class="caja-resul">
<label id="lbemult" class="lbe-resul">00</label>
</div>
</div>
<!-- 3 x 2 -->
<div class="caja-lbe">
<label class="lbe-resul">Division</label>
<div class="caja-resul">
<label id="lbedivis" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">Raiz</label>
<div class="caja-resul">
<label id="lberaiz" class="lbe-resul">00</label>
</div>
</div>
<div class="caja-lbe">
<label class="lbe-resul">potencia</label>
<div class="caja-resul">
<label id="lbepot" class="lbe-resul">00</label>
</div>
</div>
</fieldset>
</div>
</body>
</html>