0

Tengo un problema al cual no le puedo encontrar una explicación. Mi página está, a mi criterio, debidamente dividida en que ocupan el 100% de la página y otros que ocupan el % necesario para que uno o más elementos entren en el div de 100%. En éste caso me sucede lo siguiente, hay un DIV especifico que al enviar a IMPRIMIR se reubica debajo de otro, generando una desproporción en la página. Dejo imagen que va a explicar mejor

(Antes de la impresión)

Las posiciones son las esperadas, el único detalle es que al DISMINUIR el font-size, llego a la misma conclusión que la foto donde esta mal el DIV, o sea, al disminuir el font-size, el DIV "conos" se pasa debajo. introducir la descripción de la imagen aquí

(En la impresión)

introducir la descripción de la imagen aquí

.page {
  position: relative;
  height: 1490px;
  border: 1px solid grey;
  width: 25cm;
  margin: 10px auto;
  margin-bottom: 25px;
  padding: 30px 50px;
}

.section {
  width: 100%;
}

.subsection.contenedores {
  width: 25%;
}

.subsection.conos {
  width: 74%;
}

.section-table {
  width: 100%;
}

.subsection {
  display: inline-block;
}
<div class="section contenedores">
  <div class="subsection contenedores">
    <div class="section-title">
      Contenedores
    </div>
    <div class="contenedores-chart">
      <table class="contenedores-table">
        <tbody>
          <tr>
            <td>Decanter</td>
            <td>
              <div class="decanter value">36</div>
              <div class="progress-bar-contenedores" style="width: 36%;"></div>
            </td>
          </tr>
          <tr>
            <td>Secadoras</td>
            <td>
              <div class="secadoras value">17</div>
              <div class="progress-bar-contenedores" style="width: 17%;"></div>
            </td>
          </tr>
          <tr>
            <td>Zarandas</td>
            <td>
              <div class="zarandas value">6</div>
              <div class="progress-bar-contenedores" style="width: 6%;"></div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="subsection conos">
    <div class="section-title">
      Conos
    </div>
    <table class="section-table">
      <tbody>
        <tr>
          <th></th>
          <th>QL</th>
          <th>QS</th>
          <th>QP</th>
          <th>R</th>
          <th>Kg sol Hs</th>
          <th>Lts Lodo Hs</th>
          <th>Lts Solidos Hs</th>
        </tr>
      </tbody>
      <tbody>
        <tr class="desander">
          <td>Desander</td>
          <td class="ql"></td>
          <td class="qs"></td>
          <td class="qp"></td>
          <td class="r"></td>
          <td class="kg-sol-hs">-</td>
          <td class="lts-lodo-hs">-</td>
          <td class="lts-solidos-hs"></td>
        </tr>
        <tr class="desilter">
          <td>Desilter</td>
          <td class="ql"></td>
          <td class="qs"></td>
          <td class="qp"></td>
          <td class="r"></td>
          <td class="kg-sol-hs">-</td>
          <td class="lts-lodo-hs">-</td>
          <td class="lts-solidos-hs"></td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

1 respuesta 1

0

Puedes implementar flexbox a al padre de los dos las substituciones, seria

display: flex
flex-direction: row

eso haría que ambas cajas siempre quedaran horizontalmente y no deberían de darte problema, a menos que de alguna forma el elemento que se baja se este cambiando de lugar y no se quede en el elemento padre

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.