Σελίδες

Τετάρτη 19 Οκτωβρίου 2016

Χωρίστε την ανάρτηση σε 2 ή 3 κάθετες στήλες

Σας έχει τύχη ποτέ να θέλετε να χωρίσετε σε 2 στήλες την ανάρτηση σας ;
Εμένα ναι, αν θέλετε και εσείς για κάποιο λόγο, εδώ είναι η λύση.

Πηγαίνετε κανονικά να βάλετε ανάρτηση και πατάτε πάνω αριστερά το HTML

Αντιγράψτε και βάλτε τοκ κώδικα που έχουμε από κάτω.
<div style="float: left; width: 45%">
<span style="font-weight: bold;">Εδώ το κείμενο της αριστερής στήλης</span></div>
<div style="float: right; width: 45%">
<span style="font-weight: bold;">Εδώ το κείμενο της δεξιάς στήλης</span></div>
<divstyle="clear: both"></div><br />
Θα βγεί όπως βλέπετε απο κάτω.
Εδώ το κείμενο της αριστερής στήλης
Εδώ το κείμενο της δεξιάς στήλης


Αν δεν θέλουμε έντονα γράμματα Σβήνουμε το bold; από τον κώδικα η αντιγράψτε τον κώδικα που έχουμε από κάτω
<div style="float: left; width: 45%;">
Αν δεν θέλουμε έντονα γράμματα</div>
<div style="float: right; width: 45%;">
Σβήνουμε το bold; από τον κώδικα η αντιγράψτε τον κώδικα που έχουμε από πάνω</div>
<divstyle both="" clear:=""></divstyle></div><br />

Αν θέλουμε 3 στήλες, αντιγράψτε τον κώδικα από κάτω.
<div style="float: left; width: 30%;">
Στήλη # 1</div>
<div style="float: left; width: 30%;">
Στήλη # 2</div>
<div style="float: left; width: 30%;">
Στήλη # 3</div>
<divstyle both="" clear:=""></divstyle><br />

Στήλη # 1
Στήλη # 2
Στήλη # 3


Παίξτε με τον κώδικα να τον κατανοήσετε καλύτερα, είναι εύκολος και δεν έχει κανένα κίνδυνο
Η Ανάλυση του κώδικα είναι η εξής :
<div style="float: left; width: 45%"> To float: left; είναι για να είναι στοιχισμένο το κείμενο μας αριστερά. Αν βάλουμε float: center; θα κεντράρει το κείμενο και αν βάλουμε float: right; θα το στοιχίσει δεξιά στην στήλη μας.

Το width: 45% είναι για να μας δείξει το πλάτος τις στήλης μας. με 45% λέμε να έχει το μισό πλάτος τις ανάρτησης. Μπορούμε να βάλουμε και width: 300px; Επίσης μπορούμε αν έχουμε 2 στήλες στην μία να έχουμε width: 30% και στην άλλη width: 60% Έτσι η μία στήλη θα έχει μεγαλύτερο πλάτος από την άλλη

Η δεύτερη και τελευταία γραμμή του κώδικα, ναι 2 γραμμών είναι ο κώδικας είναι η εξής ;
<span style="font-weight: bold;">Εδώ το κείμενο σας</span></div>
Το font-weight: bold; είναι για να έχει έντονη γραφή, αν δεν θέλουμε έντονη γραφή το σβήνουμε και μένει έτσι <span style="">Εδώ το κείμενο σας</span></div>
Η σβήνουμε όλο το span γράφουμε το κείμενο μας και κλείνουμε με </div>
Δείτε τον κώδικα από κάτω για να καταλάβετε.
<div style="float: left; width: 45%">
Εδώ το κείμενο σας</div>

Τέλος βάζουμε την γραμμή
<divstyle="clear: both"></div><br /> 
Το <br /> το βάζουμε για να αλλάξει γραμμή και να μπορούμε ξανά να γράψουμε σε όλο το πλάτος της ανάρτησης.

Αν θέλουμε 2 στήλες βάζουμε των κώδικα 2 φορές και ρυθμίζουμε το πλάτος τους.
Αν θέλουμε 3 στήλες βάζουμε των κώδικα 3 φορές και ρυθμίζουμε το πλάτος τους.
Με μπλε ο κώδικας που βάζουμε για να ρυθμίσουμε τις στήλες μας

Όλος ο κώδικας ξανά μια φορά (3 στήλες)
<div style="float: left; width: 30%;">
Στήλη #1</div>
<div style="float: left; width: 30%;">
Στήλη #2</div>
<div style="float: left; width: 30%;">
Στήλη #3</div>
<divstyle both="" clear:=""></divstyle><br />

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Related Posts Plugin for WordPress, Blogger...