Πώς μπορώ να κάνω ένα div να επιπλέει στο κάτω μέρος του δοχείου του;
Έχω επιπλεύσει εικόνες και ένθετα πλαίσια στην κορυφή ενός δοχείου χρησιμοποιώντας float:right (ή left) πολλές φορές. Πρόσφατα αντιμετώπισα την ανάγκη να επιπλεύσει ένα div στην κάτω δεξιά γωνία ενός άλλου div με το κανονικό text wrap που έχετε με το float (κείμενο τυλιγμένο μόνο πάνω και αριστερά).
Σκέφτηκα ότι αυτό πρέπει να είναι σχετικά εύκολο, παρόλο που το float δεν έχει τιμή κάτω, αλλά δεν μπόρεσα να το κάνω χρησιμοποιώντας διάφορες τεχνικές και ψάχνοντας στο διαδίκτυο δεν βρήκα τίποτα άλλο εκτός από τη χρήση απόλυτης τοποθέτησης, αλλά αυτό δεν δίνει τη σωστή συμπεριφορά περιτύλιξης κειμένου.
Νόμιζα ότι αυτό θα ήταν ένα πολύ κοινό σχέδιο αλλά προφανώς δεν είναι. Αν κανείς δεν έχει κάποια πρόταση, θα πρέπει να σπάσω το κείμενό μου σε ξεχωριστά πλαίσια και να ευθυγραμμίσω το div με το χέρι, αλλά αυτό είναι μάλλον επισφαλές και δεν θα ήθελα να το κάνω σε κάθε σελίδα που το χρειάζεται.
EDIT: Απλά μια σημείωση για όποιον έρχεται εδώ. Η ερώτηση που συνδέεται παραπάνω ως διπλότυπο δεν είναι στην πραγματικότητα διπλότυπο. Η απαίτηση να τυλίγεται το κείμενο γύρω από το στοιχείο inset το καθιστά εντελώς διαφορετικό. Στην πραγματικότητα, η απάντηση στην κορυφαία ψηφισμένη απάντηση εδώ καθιστά σαφές γιατί η απάντηση στη συνδεδεμένη ερώτηση είναι λανθασμένη ως απάντηση σε αυτή την ερώτηση. Εν πάση περιπτώσει, δεν φαίνεται να υπάρχει ακόμα μια γενική λύση για αυτό το πρόβλημα, αλλά ορισμένες από τις λύσεις που δημοσιεύτηκαν εδώ και στην ερώτηση που συνδέεται με το σύνδεσμο μπορεί να λειτουργήσουν για συγκεκριμένες περιπτώσεις.
Ορίστε το γονικό div σε
position: relative, και στη συνέχεια το εσωτερικό div σε......και ορίστε :)
Αφού αγωνίστηκα με διάφορες τεχνικές για μερικές ημέρες, πρέπει να πω ότι αυτό φαίνεται να είναι αδύνατο. Ακόμα και με τη χρήση javascript (που δεν θέλω να κάνω) δεν φαίνεται δυνατό.
Για να ξεκαθαρίσω για όσους ίσως δεν έχουν καταλάβει - αυτό είναι που ψάχνω: στις εκδόσεις είναι αρκετά συνηθισμένο να σχεδιάζεται ένα ένθετο (εικόνα, πίνακας, σχήμα κ.λπ.) έτσι ώστε το κάτω μέρος του να ευθυγραμμίζεται με το κάτω μέρος της τελευταίας γραμμής κειμένου ενός μπλοκ (ή μιας σελίδας) με το κείμενο να ρέει γύρω από το ένθετο με φυσικό τρόπο πάνω και δεξιά ή αριστερά ανάλογα με το σε ποια πλευρά της σελίδας βρίσκεται το ένθετο. Στην html/css είναι τετριμμένο να χρησιμοποιηθεί το στυλ float για να ευθυγραμμιστεί η κορυφή ενός ένθετου με την κορυφή ενός μπλοκ, αλλά προς έκπληξή μου φαίνεται αδύνατο να ευθυγραμμιστεί το κάτω μέρος του κειμένου και του ένθετου παρά το γεγονός ότι είναι μια κοινή εργασία σελιδοποίησης.
Υποθέτω ότι θα πρέπει να επανεξετάσω τους σχεδιαστικούς στόχους για αυτό το στοιχείο, εκτός αν κάποιος έχει κάποια πρόταση της τελευταίας στιγμής.
Βάλτε το div σε ένα άλλο div και ορίστε το στυλ του γονέα div σε
position:relative;Στη συνέχεια, στο παιδί div ορίστε τις ακόλουθες ιδιότητες CSS:position:absolute; bottom:0;