Στοίβαγμα θέσης με tag Div με CSS

ψήφοι
0

Ξέρω ότι αυτό είναι ιδιαίτερα δύσκολο με CSS και το τρέχον σύνολο των browsers, αλλά παρ 'όλα αυτά έχω την απαίτηση.

Θα πρέπει να είναι σε θέση να έχουν 3 divs σε μια στήλη. Κάθε div πρέπει να είναι σε θέση να αναλάβει ένα ορισμένο ποσοστό του κατακόρυφου χώρου (για παράδειγμα, 33%). Το περιεχόμενο κάθε div θα μπορούσε να καταλήξει να είναι μεγαλύτερο από το διαθέσιμο χώρο, έτσι ώστε το div πρέπει να είναι σε θέση να ξεχειλίσει και να δώσει τις κύλισης χρήστη.

Το πρόβλημά μου είναι ότι είμαι έχοντας προβλήματα αναφέρονται για το πώς να δώσει σε κάθε πάνελ που κατακόρυφο ύψος. Καμιά ιδέα?

Δημοσιεύθηκε 09/12/2008 στις 17:57
πηγή χρήστη
Σε άλλες γλώσσες...                            


3 απαντήσεις

ψήφοι
5

Ίσως είμαι λείπει κάτι, αλλά με δεδομένο:

  <div id="column">
    <div id="a" class="cell">A</div>
    <div id="b" class="cell">B</div>
    <div id="c" class="cell">C</div>
  </div>

Ποιο είναι το πρόβλημα με:

    #column
    {
        height: 100%;
        width: 20%;
    }

    #column .cell
    {
        height: 31%;
        margin: 1%;
        background-color: green;
        overflow: auto;
    }
Απαντήθηκε 09/12/2008 στις 18:11
πηγή χρήστη

ψήφοι
1

Δεν θα απαντήσω ευθέως στην ερώτησή σας, αλλά ελπίζω να μην με downvote για αυτό !!

Το μεγαλύτερο πλαίσιο που έχω δει εδώ που κάνει σοβαρά καλό στοίβαγμα divs είναι η μεγάλη http://960.gs

Σας επιτρέπει να ορίσετε σταθερό μεγέθη για divs και αναπηδά divs που δεν θα ταιριάζει σε διάταξή σας παρακάτω. Οι τεχνικές της CSS εκεί, συμπεριλαμβανομένων των Reset.css Meyer είναι εξαιρετική.

Έχει εγγυημένη μάθηση για όλους, ακόμη και αν απλά κλέβουν το css και δεν χρησιμοποιούν το δίκτυο.

Απαντήθηκε 03/04/2009 στις 19:17
πηγή χρήστη

ψήφοι
1

Η ακόλουθη καθιστά κατάλληλα για IE7, Firefox 3, και το Google Chrome, τώρα που έχω σταθερό το boneheaded σφάλμα στο CSS:

<html>
<head>
<style type="text/css">
#one {height: 33%; overflow: auto;}
#two {height: 33%; overflow: auto;}
#three {height: 33%; overflow: auto;}
</style>
</head>

<body>

<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

<p id="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

<p id="three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

</body>

</html>
Απαντήθηκε 09/12/2008 στις 18:11
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more