my goal: produce basic image gallery can printed pdf browser 3col x 4row grid in 8.5" x 11" portrait layout. image url , short description fed django app, i'll neither know how many images viewed nor file names them.
the code follows based on http://www.w3schools.com/css/css_inline-block.asp
it produces image gallery result can seen screenshot here:
my question: there way make boxes stay in fixed grid? of boxes being pushed out of place, i'm not sure why. if there's better solution, hope you'll point me it.
thanks!
<!doctype html> <html> <head> <style> .floating-box { display: inline-block; width: 150px; height: 180px; margin: 1px; border: 1px solid #73ad21; } .text-box { font-size: 9px; border: 1px solid blue; } </style> </head> <body> <div> <h3>section 14: attachments</h3> {% inspectionfeedback in inspection.inspectionfeedback_set.all %} {% if inspectionfeedback.feedback_image.path == "" %} {% else %} <div class="floating-box"> <img src="{{ inspectionfeedback.feedback_image.url }}" style="width:140px;" alt=" " > <div class="text-box"> {{ inspectionfeedback.feedback_inspection_item }} </div> </div> {% endif %} {% endfor %} </div> </body> </html>
you using inline-block, , text 3 lines or 2 or 4 lines. inline-block tries level text "baseline" in turn messes grid.
possible solutions:
- use
display: block;, ,float: left;etc. - use
table:( - use
flex-box(if ok css)
Comments
Post a Comment