4 div μέσα σε 1

rafinos · 24 Απριλίου 2014

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

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

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

Κάτι τέτοιο για παράδειγμα:

te0ne · 25 Απριλίου 2014

τι ακριβως θες να κανεισ?

rafinos · 25 Απριλίου 2014

Ακόμα δοκιμές κάνω απλώς σκέφτομαι να φτιάξω ένα κουίζ για android και θεωρώ ότι θα μου είναι πιο εύκολο με html+javascript παρά με java

Μέχρι να τρελαθώ και να αρχίσω τη java (απλώς java ξέρω μόνο τα βασικά)

cyclo · 25 Απριλίου 2014



<div class='foo' style='width 480px; margin:0 auto'>

<style>.foo>div { margin:1%; width:48%; background:black;}</style>

div

div

div

div



</div>

slevinkelevra · 25 Απριλίου 2014

Αμα φτιαξεις εναν πινακα 2χ2 και εχεις αυτα τα 4 div μεσα στον πινακα, δεν θα χουν στανταρντ αποστασεις?

Και μετα βαλε τα width height των divs σε στιλ 50%

Και λογικα δε θα βγαινουν εκτος εξωτερικου (5ου) div. Το οποιο κ αυτο μπορει να χει διαστασεις 50% κτλ.

Οφ δε τοπ οφ μαι χεντ το βγαλα τωρα, αμα δε δουλεψει πες το.

rafinos · 26 Απριλίου 2014

Τελικά το έκανα σαν display: table και πάει λέγοντας...



html, body{

	height: 100%;

	width: 100%;

	margin: 0;

}



.table{

	margin: 0 auto;

    display: table;

    width: 90%;

    height: 50%;

    backgournd: #000;

}

    

.table>.row{

    display: table-row;

    width: 100%;

    height: 50%;

    background:green;

}



.row>.cell{

    display: table-cell;

    width: 50%;

    height: 50%;

    padding: 1%;

} 



.answers{

	width: 100%;

	height: 100%;

	background: #ffffff;

}



<!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"></div>

		</div>

        <div id='cell2' class='cell'>

        	<div class="answers"></div>

        </div>

    </div>       

    <div class='row'>

        <div id='cell3' class='cell'>

        	<div class="answers"></div>

        </div>

        <div id='cell4' class='cell'>

        	<div class="answers"></div>

        </div>

    </div>       

</div>

</body>

</html>

Επεξ/σία 26 Απριλίου 2014 από rafinos

slevinkelevra · 26 Απριλίου 2014

Ωραιος κωδικας! Nicely done

alou · 26 Απριλίου 2014

Ναι μπράβο, είσαι απίθανος (...), πως το Site: σκέφτηκες ...

chrism4111 · 26 Απριλίου 2014

Θα σε συμβούλευα να δουλέψεις πάνω σε ένα CSS Framework, όπως είναι το Skeleton το Bootstrap και άλλα.

Αυτά τα κάνεις για πλάκα με τέτοια Framework χωρίς να καις εγκεφαλικά κύταρα για το πώς θα πάνε τα floats στο css

Βιάστηκα και δεν είδα ότι είναι android app. Δεν ξέρω άν έχεις την δυνατότητα να καλέσεις κάποιο css μέσω της εφαρμογής που φτιάχνεις.. Σίγουρα όμως αν μπορείς να καλέσεις ένα framework τότε θα σε γλυτώσει από αρκετό κόπο.

rafinos · 26 Απριλίου 2014

Βιάστηκα και δεν είδα ότι είναι android app. Δεν ξέρω άν έχεις την δυνατότητα να καλέσεις κάποιο css μέσω της εφαρμογής που φτιάχνεις.. Σίγουρα όμως αν μπορείς να καλέσεις ένα framework τότε θα σε γλυτώσει από αρκετό κόπο.

Το bootstrap που ξέρω ότι είναι δυνατό... πόσο εύκολο είναι στην εκμάθηση όμως;

Με τον συγκεκριμένο κώδικα θέλω να περάσω μέσα σε κάθε τετραγωνάκι μια εικόνα που να είναι και αυτή ίδια με το 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{
height: 100%;
width: 100%;
margin: 0;
}

.table{
margin: 0 auto;
display: table;
width: 90%;
height: 50%;
backgournd: #000;
}

.table>.row{
display: table-row;
width: 100%;
height: 50%;
background:green;
}

.row>.cell{
display: table-cell;
width: 50%;
height: 50%;
padding: 1%;
}

.answers{
width: 100%;
height: 100%;
background: #ffffff;
}

.answers img{
display: block;
width: 100%;
height: 100%;
}

te0ne · 27 Απριλίου 2014

Ναι μπράβο, είσαι απίθανος (...), πως το Site: σκέφτηκες ...

μην ειρωνευεσαι!!! xD

rafinos · 27 Απριλίου 2014

μην ειρωνευεσαι!!! xD

Οπως θα προσεξες βοηθησε και αυτος στο αλλο φορουμ χαχαχαχαχα

XPHSTOS_ · 27 Απριλίου 2014

Δες λίγο αυτό που έκανα, http://codepen.io/anon/pen/GIjgf

Αλλά επειδή πρόκειται για εφαρμογή, κάτι έχει πάρει το αυτί μου για τα flex boxes,
Αυτά προτιμώνται για εφαρμογές γιατί μπορείς να πεις ότι θέλεις να έχεις 4 σε μια οθόνη (συγκεκριμένη ανάλυση), αλλά στην δική μου οθόνη (διαφορετική ανάλυση) φαίνονται 6.. τα flex boxes μεγαλώνουν και μικραίνουν ανάλογα με την ανάλυση.
Έτσι ο χρήστης βλέπει πάντα 4, όσα ήθελες εσύ να φαίνονται... ούτε λιγότερα ούτε περισσότερα.

rafinos · 27 Απριλίου 2014

Τα flex είναι ωραία που έριξα μια ματιά αλλά ξέρεις τι καταλαβαίνω... πόσο μπροστά ήταν το <table> που βιάστηκαν να το φάνε

παπι · 27 Απριλίου 2014

Θες και media queries

Σύνδεση

4 div μέσα σε 1

Προτεινόμενες αναρτήσεις

rafinos

te0ne

rafinos

cyclo

slevinkelevra

rafinos

slevinkelevra

alou

chrism4111

rafinos

te0ne

rafinos

XPHSTOS_

rafinos

παπι

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση