He estado probando mi mano en Electron y para eso, estoy tratando de crear 2 divs, uno al lado del otro. He leído algunas soluciones aquí para alinear 2 divs uno al lado del otro, pero nada funciona para mí. Aquí está mi código hasta ahora:

Código

body, html {
    height: 100%;
}

.wrapper{
    height: 90%;
}

.request-pane {
    float:left; /* add this */
    margin-left: 10%;   
    height: 90%;
    width: 45%;
    border: 1px solid red;
}

.response-pane {
    float:right; /* add this */
    margin-left: 55%;
    height: 90%;
    width: 45%;
    border: 1px solid black;
}
<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

¿Alguien puede señalarme lo que estoy haciendo mal aquí? Soy muy nuevo en HTML, así que no sé si la solución es demasiado obvia o no.

1
user3196429 8 sep. 2018 a las 07:05

4 respuestas

La mejor respuesta

Puedes hacerlo de dos maneras.

  1. eliminar el atributo flotante y agregar

    .envoltura{ altura: 90%; pantalla: flex; }

  2. intente usar display: inline-block en css para el panel de solicitud y el panel de respuesta

2
Dr J Manish 8 sep. 2018 a las 05:26

Elimine la propiedad margin-left y también agregue display:inline-flex a la clase css request-pane y response-pane como se muestra a continuación.

body, html {
    height: 100%;
}

.wrapper{
    height: 90%;
}

.request-pane {
    float:left; /* add this */
    height: 90%;
    width: 45%;
    border: 1px solid red;
    display:inline-flex;
}

.response-pane {
    float:right; /* add this */
    height: 90%;
    width: 45%;
    border: 1px solid black;
    display:inline-flex;
}
<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

Esto funciona bien Ejecute el código desde el fragmento, espero que ese sea el resultado que deseaba.

1
Neeraj Kamat 8 sep. 2018 a las 05:33

Si quieres una forma aún más simple, usa bootstrap. Divide tu pantalla en dos mitades. En cada sección crea div. Esto llenará por completo sus requisitos. W3school es el mejor sitio web para esto.

0
Amardeep Kumar Agrawal 8 sep. 2018 a las 05:38

Si desea mantener floats aquí, arreglado con código

body, html {
  height: 100%;
}

.request-pane, .response-pane {
  box-sizing: border-box; /* count border inside of a `width` */
}

.wrapper {
  height: 90%;
}

.request-pane {
  float: left;
  margin-left: 10%;
  height: 90%;
  width: 45%;
  border: 1px solid red;
}

.response-pane {
  float: right;
  /* margin-left: 55%; */ /* this is a root of a problems */
  height: 90%;
  width: 45%;
  border: 1px solid black;
}
<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

Pero sí, probablemente sea mejor que uses flexbox. Puede encontrar una buena guía aquí: https: // css -tricks.com/snippets/css/a-guide-to-flexbox/.

Además, parece que le falta una comprensión básica de cómo funciona HTML / CSS, por lo que es mejor que tenga algunos cursos básicos básicos para avanzar.

1
extempl 8 sep. 2018 a las 04:19