0

No puedo alinearlas horizontalmente solo 2 de allas se dejan la de en medio no se quiere colocar en el centro para posisionarlas uso el float:left; float:rigth; pero para centrarla y que al momento de mover la pantalla sea responsica igual no se amontone eso funciona con 2 nadamas introducir la descripción de la imagen aquí

codigo css:

#tab2{
  float: left;
  border:#CACFD2 20px solid;
  padding: 5px;
  color: #fff;
  width: 420px;
  margin: 26px;
  background:#1C2833;
}
 
#tab3{
  float: left;
  border:#CACFD2 20px solid;
  padding: 5px;
  color: #fff;
  width: 425px;
  margin: 26px;
  background:#1C2833;                                                           
}

#tab4{
  float: right;
  border:#CACFD2 20px solid;
  padding: 5px;
  color: #fff;
  width: 435px;
  margin: 26px;
  background:#1C2833; 
}
<div id="tab2">
    <center>
        <h2 style="font-family: cursive;">Personal:</h2>
    </center>
    <table class="" id="tabla2">
        <tr class="fila2">
          <td>
            <select name="area" class="select" id="letra2" required="">
              <option>Area de trabajo:</option>
              <option>Maquinas</option>
              <option>Encuadernacion</option>
              <option>Acabado</option>
            </select> 
          </td>
          <td>
            <select name="nombre" class="select" id="letra2" required="">
              <option>Nombre del trabajador:</option>
              <?php
                 $rows2=$optionsmodel->getPersonal(); 
                 foreach ($rows2 as $row) { ?>
                  <option>
                    <?php echo $row['usuario'];?>
                  </option>
              <?php } ?>
            </select>
          </td>
          <td style="display:none;" class="eliminar"><i class="fa fa-times" width="35" height="35" /></td>
        </tr>
    </table>
    <br>
    <div class="btn-der">
        <center>
          <button type="button" id="adicional2" class="boton_3">
            <img class="fa fa-plus" src="<?=URL ?>public/img/agregarusuario.png" width="35" height="35" />
            PERSONAL
          </button>
        </center>
    </div>
    <br>
    <br>
</div>

2
  • Haz tratado de usar flex-box en vez de float: left y right? Commented el 6 mar. 2019 a las 23:23
  • no como lo aria un ejemplo porfavor Commented el 7 mar. 2019 a las 15:43

1 respuesta 1

1

Puedes implementar flex-box para lo que necesitas, te muestro un ejemplo:

.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#tab2{
  border:#CACFD2 20px solid;
  padding: 5px;
  color: #fff;
  width: 420px;
  margin: 10px;
  background:#1C2833;
}
 
#tab3{
  border:#CACFD2 20px solid;
  padding: 5px;
  color: #fff;
  width: 425px;
  margin: 10px;
  background:#1C2833;                                                           
}

#tab4{
  border:#CACFD2 20px solid;
  padding: 5px;
  color: #fff;
  width: 435px;
  margin: 10px;
  background:#1C2833; 
}
<div class="container">
<div id="tab2">
    <center>
        <h2 style="font-family: cursive;">Personal:</h2>
    </center>
    <table class="" id="tabla2">
        <tr class="fila2">
          <td>
            <select name="area" class="select" id="letra2" required="">
              <option>Area de trabajo:</option>
              <option>Maquinas</option>
              <option>Encuadernacion</option>
              <option>Acabado</option>
            </select> 
          </td>
          <td>
            <select name="nombre" class="select" id="letra2" required="">
              <option>Nombre del trabajador:</option>
              <?php
                 $rows2=$optionsmodel->getPersonal(); 
                 foreach ($rows2 as $row) { ?>
                  <option>
                    <?php echo $row['usuario'];?>
                  </option>
              <?php } ?>
            </select>
          </td>
          <td style="display:none;" class="eliminar"><i class="fa fa-times" width="35" height="35" /></td>
        </tr>
    </table>
    <br>
    <div class="btn-der">
        <center>
          <button type="button" id="adicional2" class="boton_3">
            <img class="fa fa-plus" src="<?=URL ?>public/img/agregarusuario.png" width="35" height="35" />
            PERSONAL
          </button>
        </center>
    </div>
    <br>
    <br>
</div>

<div id="tab3">
    <center>
        <h2 style="font-family: cursive;">Personal:</h2>
    </center>
    <table class="" id="tabla2">
        <tr class="fila2">
          <td>
            <select name="area" class="select" id="letra2" required="">
              <option>Area de trabajo:</option>
              <option>Maquinas</option>
              <option>Encuadernacion</option>
              <option>Acabado</option>
            </select> 
          </td>
          <td>
            <select name="nombre" class="select" id="letra2" required="">
              <option>Nombre del trabajador:</option>
              <?php
                 $rows2=$optionsmodel->getPersonal(); 
                 foreach ($rows2 as $row) { ?>
                  <option>
                    <?php echo $row['usuario'];?>
                  </option>
              <?php } ?>
            </select>
          </td>
          <td style="display:none;" class="eliminar"><i class="fa fa-times" width="35" height="35" /></td>
        </tr>
    </table>
    <br>
    <div class="btn-der">
        <center>
          <button type="button" id="adicional2" class="boton_3">
            <img class="fa fa-plus" src="<?=URL ?>public/img/agregarusuario.png" width="35" height="35" />
            PERSONAL
          </button>
        </center>
    </div>
    <br>
    <br>
</div>

<div id="tab4">
    <center>
        <h2 style="font-family: cursive;">Personal:</h2>
    </center>
    <table class="" id="tabla2">
        <tr class="fila2">
          <td>
            <select name="area" class="select" id="letra2" required="">
              <option>Area de trabajo:</option>
              <option>Maquinas</option>
              <option>Encuadernacion</option>
              <option>Acabado</option>
            </select> 
          </td>
          <td>
            <select name="nombre" class="select" id="letra2" required="">
              <option>Nombre del trabajador:</option>
              <?php
                 $rows2=$optionsmodel->getPersonal(); 
                 foreach ($rows2 as $row) { ?>
                  <option>
                    <?php echo $row['usuario'];?>
                  </option>
              <?php } ?>
            </select>
          </td>
          <td style="display:none;" class="eliminar"><i class="fa fa-times" width="35" height="35" /></td>
        </tr>
    </table>
    <br>
    <div class="btn-der">
        <center>
          <button type="button" id="adicional2" class="boton_3">
            <img class="fa fa-plus" src="<?=URL ?>public/img/agregarusuario.png" width="35" height="35" />
            PERSONAL
          </button>
        </center>
    </div>
    <br>
    <br>
</div>
</div>

En este caso eliminas los float: right - left que usas en tus tab, y los posicionas a todos dentro de un contenedor padre, en este contenedor usas flex-box como te muestro en el ejemplo, puedes usar tanto space-between ó space-around para arreglar los contenedores como mejor te parezca, y si quieres los 3 en la misma linea ya tendrias que ir bajando con las propiedades margin ó width como mejor te parezca.

1
  • ya se pudo muchas gracias tu ejemplo me ayudo a entenderlo ya después movi a mi gusto y quedo como queria gracias Commented el 7 mar. 2019 a las 17:47

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.