Estoy tratando de alinear div horizontalmente a medida que el navegador cambia de tamaño, actualmente tengo 3 divs. Según el requisito, puedo agregar un div adicional. Mi problema es que tan pronto como aumento el tamaño de la ventana por encima de 2500, el lado derecho de la pantalla se vacía y todos los divs flotan hacia la izquierda. Como no puedo establecer el ancho div en 30-33% según el requisito. A continuación se muestra mi código. amablemente ayuda
div.box-container { mc-grid-row: true; margin-left: auto; margin-right: auto; float: left; display: flex; width: 100% } div.box { float: left; background-color: #ffffff; position: relative; padding: 10px; box-sizing: border-box; height: 326px; margin-left: 20px; margin-bottom: 0; top: 55px; border-top-right-radius: 0px; width: 30%; border: 1px solid #cccccc; } <div class="box-container"> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> </div>Como @Arman Ebrahimi ya había mencionado correctamente. Use solo caja flexible. El tema de la responsabilidad se puede manejar bien con las consultas de los medios.
ejemplo de trabajo
* { box-sizing: border-box; } div.box-container { display: flex; flex-wrap: wrap; font-size: 30px; text-align: center; gap: 10px; width: 80%; margin: 0 auto; /* or use justify-content: center; */ } .box { background-color: #f1f1f1; padding: 10px; flex: 30%; border: 1px solid #cccccc; word-break: break-word; height: 326px; } @media (max-width: 800px) { .box { flex: 100%; } } <div class="box-container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> </div>Utilice justify-content: center; cuando estás usando flex . Esto significa que los contenidos flexionados siempre estarán centrados en todos los tipos de pantalla.
div.box-container { mc-grid-row: true; margin-left: auto; margin-right: auto; display: flex; gap: 10px; justify-content: center; width: 100% } div.box { background-color: #ffffff; position: relative; padding: 10px; box-sizing: border-box; height: 326px; margin-bottom: 0; top: 55px; border-top-right-radius: 0px; width: 33.33%; border: 1px solid #cccccc; } body { margin: 0; } <div class="box-container"> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> </div> Edite ~ agregue otro div, reduzca el % que cubre el div. Demostrar capacidad de respuesta min-width .
div.box-container { mc-grid-row: true; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100% } div.box { background-color: #ffffff; position: relative; padding: 10px; box-sizing: border-box; height: 326px; margin-bottom: 0; top: 55px; border-top-right-radius: 0px; width: 24%; min-width: 300px; border: 1px solid #cccccc; } body { margin: 0; } <div class="box-container"> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> </div>Retire float y solo use flex :
* { box-sizing: border-box; } body, html { margin: auto; } div.box-container { mc-grid-row: true; margin-left: auto; margin-right: auto; display: flex; width: 100%; } div.box { background-color: #ffffff; padding: 10px; height: 326px; margin-left: 20px; margin-bottom: 0; top: 55px; border-top-right-radius: 0px; width: calc(100vw / 3); /*calc(100vw / number of div)*/ border: 1px solid #cccccc; word-break: break-word; } <div class="box-container"> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> <div class="box"> <p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p> </div> </div>