Oye, quiero que mis divs aparezcan en una sola columna como
, pero no puedo lograr los resultados deseados. Quiero exactamente los mismos 6 contenedores en varias filas y una sola columna con el mismo estilo que en este div. Cualquier ayuda será apreciada
.dot:hover{ box-shadow: 0 15px 30px rgba(0,0,0,.5); } .dot{ position: absolute; top: 30%; left: 25%; transform: translate(-50%,-50%); padding: 20px; box-sizing: border-box; background: #D3D3D3; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,.5); display: flex; width: 600px; transition: .5s; } .dot .imgBx{ width: 150px; flex: 0 0 150px; } .dot .imgBx img{ max-width: 100%; } .dot .content{ padding-left: 20px; } .dot .content p{ text-align: justify; } .right{ float: right; flex-wrap: wrap; flex-direction: column; } <div class="right"> <div class="dot"> <div class="imgBx"> <img src="{% static 'images/banner/bg.PNG' %}"> </div> <div class="content"> <p>Bangladesh's apparel exporters concerned as NBR firm on bond licencing</p> </div> </div> </div>esta línea
position: absolute;hace que todos sus DIV .dot se muestren en la misma posición en relación con la pantalla (en este caso particular), sugiero eliminarlo