0

Hola a todos me encuentro diseñando un filtro de búsqueda con html5 y css3 ya tengo la estructura del proyecto pero no logro posicionar los contenedores al centro y que el ultimo div tenga un background-color naranja.

Esta es la imagen de la estructura que tengo de momento introducir la descripción de la imagen aquí

A continuación dejare el codigo html5

  <section id="filter" class="filter">
        <div class="column">
            <div class="card">
                <div class="container">
                    <p>Check In</p>
                    <input type="date">
                </div>
            </div>
        </div>
        <div class="column">
            <div class="card">
                <div class="container">
                    <p>Check Out</p>
                    <input type="date">
                </div>
            </div>
        </div>
        <div class="column">
            <div class="card">
                <div class="container">
                    <p>Cantidad de personas</p>
                    <select name="" id="">
                        <option value="">1</option>
                        <option value="">2</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="card">
                <div class="container">
                    <img src="assets/img/iconos/search.png" alt="search">  
                </div>
            </div>
        </div>   
    </section>

Este es el codigo css que tengo

.filter{
    background-color: #fff;
    box-shadow: 0 3px 20px rgba(0,0,0,0.3);
    width: 70%;
    margin: 0 auto;
    margin-top:-90px;
    padding: 40px;
    display: flex;
    height: 120px;
    position: relative;
}

.column{
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
  position: relative;
}

.card{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
}

Y aqui la imagen original de como se debería ver introducir la descripción de la imagen aquí

2
  • En vez de floats te recomiendo usar flexbox. El section lo haces flex y luego juegas con cada item Commented el 14 feb. 2022 a las 21:16
  • como puedo pintar la ultima celda completamente ? es que solo me ocupa una parte, como hago para que me ocupe todo el ancho , me refiero a la parte donde esta la lupa @HernánGarcia
    – Codej
    Commented el 15 feb. 2022 a las 1:38

2 respuestas 2

1

Si el resultado esperado es:

result

Necesita para agregar la clase adicional en la columna con la imagen:

<div class="column column__search">
        <div class="card">
            <div class="container">
                <img src="search.png" alt="search">  
            </div>
        </div>
    </div>  

Y para modificar algunos de css tambien:

.card{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
}

.column__search .card {
  height: 100%;
  top: calc(50% - 40px); 
}

.column__search {
  background: #f9ad45;
  height: calc(100% + 40px);
}

.container {
  position: relative;
  height: 100%;
}

.container img { 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  transform: translate(-50%,-50%);
}

Generalmente, su código parece un poco excesivamente complicado debido de:

  • Uso de float - desaprobado
  • Uso de los margens negativos - anti-patrón

Uso de flex podría ser una mejor opción

1
  • Muchas gracias por tu respuesta, justo lo que buscaba
    – Codej
    Commented el 15 feb. 2022 a las 22:58
0

como te dije antes, float es una propiedad css que a partir de flexbox ha quedado practicamente en deshuso. Basado en tu estructura (la cual se puede simplificar) yo lo haria asi:

<section id="filter" class="filter">
  <div class="column">
      <div class="card">
          <div class="container">
              <p>Check In</p>
              <input type="date">
          </div>
      </div>
  </div>
  <div class="column">
      <div class="card">
          <div class="container">
              <p>Check Out</p>
              <input type="date">
          </div>
      </div>
  </div>
  <div class="column">
      <div class="card">
          <div class="container">
              <p>Cantidad de personas</p>
              <select name="" id="">
                  <option value="">1</option>
                  <option value="">2</option>
              </select>
          </div>
      </div>
  </div>
  <div class="column lupa">
      <div class="card">
          <div class="container">
           <img src="assets/img/iconos/search.png" alt="search">
          </div>
      </div>
  </div>
</section>

css

html, body{
      height: 100%;
      box-sizing: border-box;
    }
.filter{
 border-radius: .7rem;
 background-color: white;
 display: inline-flex;
 justify-content: space-evenly;
}
filter *{
 height: 100%;
}
.column{
 padding: 0 2rem;
}
.lupa{
 border-radius: 0 .7rem .7rem 0;
 background-color: coral;
 display: flex;
 align-items: center;
}

Seria largo explicarte como funciona flexbox, te dejo aqui un buen tutorial al respecto: https://youtube.com/playlist?list=PLvq-jIkSeTUbQc3dGsssp8lxAi5npMrys

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.