4 div μέσα σε 1

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

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

Απάντηση
rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

4 div μέσα σε 1

Δημοσίευση από rafinos » 24 Απρ 2014 23:08

Γεια σας παιδιά υπάρχει τρόπος να βάλω 4 div μέσα σε ένα και να το χωρίζουν σε 4 ίδια κομμάτια με ένα υποτυπώδες margin και να είναι κεντραρισμένα;

Βρήκα πως να το κάνω με συγκεκριμένα Pixels απλά εγώ το θέλω να δουλεύει με percentance...

Δε με ενδιαφέρουν οι αναλύσεις και θέλω σε οποιαδήποτε ανάλυση να έχω το ίδιο αποτέλεσμα!

Κάτι τέτοιο για παράδειγμα:
Συνημμένα
Untitled-1.jpg

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

4 div μέσα σε 1

Δημοσίευση από geomagas » 25 Απρ 2014 00:12

Σε πειράζει αν είναι 6 αντί 4;

html:

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

<div class='table'>
    <div class='row'>
        <div id='cell1' class='cell'>1</div>
        <div id='cell2' class='cell'>2</div>
    </div>        
    <div class='row'>
        <div id='cell3' class='cell'>3</div>
        <div id='cell4' class='cell'>4</div>
    </div>        
</div>
css:

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

.table
    &#123;
    display&#58; table;
    width&#58; 100%;
    &#125;
.row
    &#123;
    display&#58; table-row;
    width&#58; 100%;
    &#125;
.cell
    &#123;
    display&#58; table-cell;
    width&#58; 50%;
    &#125;
#cell1 &#123; background-color&#58; yellow; &#125;
#cell2 &#123; background-color&#58; orange; &#125;
#cell3 &#123; background-color&#58; beige; &#125;
#cell4 &#123; background-color&#58; red; &#125;

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

4 div μέσα σε 1

Δημοσίευση από alou » 25 Απρ 2014 00:18

css

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

span.container &#123;width&#58;100%;margin&#58;0;padding&#58;0;border&#58;0;display&#58;block&#125;
span.square &#123;width&#58;47%;height&#58;100px;display&#58;inline-block;margin&#58;1%;padding&#58;0;border&#58;1px solid black&#125;
html

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

<span class="container">
<span class="square">
 bla
</span>
<span class="square">
 bla
</span>
<span class="square">
 bla
</span>
<span class="square">
 bla
</span>
</span>
Το ύψος του κάθε κομματιού καθορίζεται ανάλογα με το περιεχόμενο, εκτός αν θες να το ορίσεις στο css με pixel όμως.
http://jsfiddle.net/g53Vy/

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

4 div μέσα σε 1

Δημοσίευση από rafinos » 25 Απρ 2014 00:49

geomagas έγραψε:Σε πειράζει αν είναι 6 αντί 4;

html:

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

<div class='table'>
    <div class='row'>
        <div id='cell1' class='cell'>1</div>
        <div id='cell2' class='cell'>2</div>
    </div>        
    <div class='row'>
        <div id='cell3' class='cell'>3</div>
        <div id='cell4' class='cell'>4</div>
    </div>        
</div>
css:

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

.table
    &#123;
    display&#58; table;
    width&#58; 100%;
    &#125;
.row
    &#123;
    display&#58; table-row;
    width&#58; 100%;
    &#125;
.cell
    &#123;
    display&#58; table-cell;
    width&#58; 50%;
    &#125;
#cell1 &#123; background-color&#58; yellow; &#125;
#cell2 &#123; background-color&#58; orange; &#125;
#cell3 &#123; background-color&#58; beige; &#125;
#cell4 &#123; background-color&#58; red; &#125;
Το θέλω συγκεκριμένα με 4 αλλά ποια η διαφορά αν γίνει με 6;

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

4 div μέσα σε 1

Δημοσίευση από geomagas » 25 Απρ 2014 00:51

Τα 4 μόνο θα φαίνονται ούτως ή άλλως.
Απλά προσομοιώνω ένα table. Και για να γίνει αυτό, εκτός από το εξωτερικό, χρειάζομαι 2 rows με 2 cells έκαστη. Σύνολο 6.

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

4 div μέσα σε 1

Δημοσίευση από rafinos » 25 Απρ 2014 01:52

Α οκ... εμένα με ενδιαφέρει πόσα φαίνονται :P
Θα δοκιμάσω τις λύσεις και τον δύο και θα κρατήσω την καλύτερη!!!!
Σας ευχαριστώ πολύ για τον χρόνο σας :)

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

4 div μέσα σε 1

Δημοσίευση από rafinos » 26 Απρ 2014 22:45

Με τον συγκεκριμένο κώδικα θέλω να περάσω μέσα σε κάθε τετραγωνάκι μια εικόνα που να είναι και αυτή ίδια με το div σε μέγεθος... απλά υπάρχει ένα θέμα.
Σε μερικές περιπτώσεις με τις εικόνες τα divs δεν μικραίνουν (θα ανεβάσω ένα παράδειγμα με εικόνες και ένα χωρίς για να καταλάβεται)

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<div class='table'>
    <div class='row'>
        <div id='cell1' class='cell'>
        	<div class="answers"><img src="images/1.jpg"></div>
		</div>
        <div id='cell2' class='cell'>
        	<div class="answers"><img src="images/1.jpg"></div>
        </div>
    </div>       
    <div class='row'>
        <div id='cell3' class='cell'>
        	<div class="answers"><img src="images/1.jpg"></div>
        </div>
        <div id='cell4' class='cell'>
        	<div class="answers"><img src="images/1.jpg"></div>
        </div>
    </div>       
</div>
</body>
</html>

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

html, body&#123;
	height&#58; 100%;
	width&#58; 100%;
	margin&#58; 0;
&#125;

.table&#123;
	margin&#58; 0 auto;
    display&#58; table;
    width&#58; 90%;
    height&#58; 50%;
    backgournd&#58; #000;
&#125;
    
.table>.row&#123;
    display&#58; table-row;
    width&#58; 100%;
    height&#58; 50%;
    background&#58;green;
&#125;

.row>.cell&#123;
    display&#58; table-cell;
    width&#58; 50%;
    height&#58; 50%;
    padding&#58; 1%;
&#125; 

.answers&#123;
	width&#58; 100%;
	height&#58; 100%;
	background&#58; #ffffff;
&#125;

.answers img&#123;
	display&#58; block;
	width&#58; 100%;
	height&#58; 100%;
&#125;
Συνημμένα
b.jpg
a.jpg

Απάντηση

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

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

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