2 responsive divs που το ενα ξεχειλωνει και φαινεται πολυ ασχημα καθως αλλαζουν διαστασεις

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Fanis2016
Δημοσιεύσεις: 3
Εγγραφή: 30 Αύγ 2016 13:55

2 responsive divs που το ενα ξεχειλωνει και φαινεται πολυ ασχημα καθως αλλαζουν διαστασεις

Δημοσίευση από Fanis2016 » 30 Αύγ 2016 14:16

Καλησπερα σας εχω μια απορια-προβλημα σχετικα με τον παρακατω responsive κωδικα, οταν ειναι με τις δυο λεξεις μονο μεσα στα 2 div τοτε τα δυο div εχουν το ιδιο μεγεθος, τις ιδιες διαστασεις ακριβως καθως αλλαζουν :

Κώδικας: Επιλογή όλων

<div class="wrapper">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

Κώδικας: Επιλογή όλων

.wrapper &#123; 
  border &#58; 2px solid #000; 
  overflow&#58;hidden;
&#125;

.wrapper div &#123;
   min-height&#58; 200px;
   padding&#58; 10px;
&#125;
#one &#123;
  background-color&#58; gray;
  float&#58;left; 
  margin-right&#58;20px;
  width&#58;140px;
  border-right&#58;2px solid #000;
&#125;
#two &#123; 
  background-color&#58; white;
  overflow&#58;hidden;
  margin&#58;10px;
  border&#58;2px dashed #ccc;
  min-height&#58;170px;
&#125;

@media screen and &#40;max-width&#58; 400px&#41; &#123;
   #one &#123; 
    float&#58; none;
    margin-right&#58;0;
    width&#58;auto;
    border&#58;0;
    border-bottom&#58;2px solid #000;    
  &#125;
&#125;
Οταν ομως αλλαξω λιγο τον κωδικα και απλα προσθεσω λιγο περισσοτερο κειμενο πχ μια παραγραφο lorem ipsum και στα δυο ιδιου ποσου λεξεων, τοτε το ενα div ξεχειλωνει και φαινεται πολυ ασχημα ενω το αλλο οχι ! Θα ηθελα να πετυχω να μοιαζουν ομοιομορφα και τα δυο div καθως αλλαζουν και να μην ξεχειλωνειν-ουν.

Κώδικας: Επιλογή όλων

<div class="wrapper">
    <div id="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div id="two">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>

Κώδικας: Επιλογή όλων

.wrapper &#123; 
  border &#58; 2px solid #000; 
  overflow&#58;hidden;
&#125;

.wrapper div &#123;
   min-height&#58; 200px;
   padding&#58; 10px;
&#125;
#one &#123;
  background-color&#58; gray;
  float&#58;left; 
  margin-right&#58;20px;
  width&#58;140px;
  border-right&#58;2px solid #000;
&#125;
#two &#123; 
  background-color&#58; white;
  overflow&#58;hidden;
  margin&#58;10px;
  border&#58;2px dashed #ccc;
  min-height&#58;170px;
&#125;

@media screen and &#40;max-width&#58; 400px&#41; &#123;
   #one &#123; 
    float&#58; none;
    margin-right&#58;0;
    width&#58;auto;
    border&#58;0;
    border-bottom&#58;2px solid #000;    
  &#125;
&#125;
Πως μπορω να λυσω αυτο προβλημα ;
- Συγνωμη που δεν μπορεσα να τονισω τις λεξεις αλλα εχω προβλημα με το keyboard !

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

2 responsive divs που το ενα ξεχειλωνει και φαινεται πολυ ασχημα καθως αλλαζουν διαστασεις

Δημοσίευση από alou » 30 Αύγ 2016 16:44

Καλησπέρα, καταρχάς, δεν είναι responsive αυτό που παρουσιάζεις αλλά δεν θα ανοίξω αυτή την κουβέντα γιατί είναι εκτός θέματος.

Ρίξε μια ματιά αν θες εδώ
http://codepen.io/alou/pen/gwYgmV

Κώδικας: Επιλογή όλων

.wrapper &#123;
  display&#58;flex;
&#125;

.half &#123;
  width&#58;50%;
&#125;

Fanis2016
Δημοσιεύσεις: 3
Εγγραφή: 30 Αύγ 2016 13:55

2 responsive divs που το ενα ξεχειλωνει και φαινεται πολυ ασχημα καθως αλλαζουν διαστασεις

Δημοσίευση από Fanis2016 » 30 Αύγ 2016 17:55

Πολύ σύντομο και εύκολο, άραγε υποστηρίζεται από όλους τους browsers ; Δεν γνώριζα αυτή την τεχνική, μόνος μου μαθαίνω οπότε δεν ξέρω και πάρα πολλά αλλά θέλω να μάθω, να τα καταφέρω. Μια απορία ακόμα, με αυτόν τον τρόπο που μου έδειξες πως θα μπορούσαμε να κάνουμε το .half , το κείμενο του, να πηγαίνει μετά πχ τα 600px κάτω από το wrapper ;

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

2 responsive divs που το ενα ξεχειλωνει και φαινεται πολυ ασχημα καθως αλλαζουν διαστασεις

Δημοσίευση από alou » 30 Αύγ 2016 18:01

Κοίτα, με media queries (που ήδη έχεις χρησιμοποιήσει παραπάνω) ορίζεις οτιδήποτε αφορά διαφορετική συμπεριφορά σε διαφορετικές αναλύσεις.

Καλά κάνεις και θες να φτιάξεις κάτι μόνος σου αλλά συνήθως χρησιμοποιούμε κάποιο έτοιμο grid system για τέτοιες δουλειές, δες πχ το twitter bootstrap.
https://getbootstrap.com/examples/grid/
ή αν θες flexbox
http://flexboxgrid.com/

Το flex υποστηρίζεται από τους περισσότερους σύγχρονους browser που έχουν σημασία.
http://caniuse.com/#feat=flexbox

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης