CSS Vertical Float Technique

Est-il possible d'avoir un flotteur vertical de travail par analogie avec l'horizontale? Dans le code Html ci-dessous je voudrais le bouton vert pour être comme il est et le jaune à flotter vers le bas au-delà de gris en forme de pointe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <table style="margin: 250px; width:50px; height: 100px; background-color: #ccc; table-layout: fixed;">
        <tr>
            <td style="vertical-align:top;">
                <div style="margin-top:-20px; width:50px; height: 40px; background-color: Green;">Top</div>
                <div style="margin-bottom:-20px; width:50px; height: 40px; background-color: Yellow;">Bottom</div>
            </td>
        </tr>
    </table>
</body>
</html>

Mise à jour de 1 - voici un peu plus près de domaine de image de ce que je suis en train de réaliser. Je suis à la recherche d'une verticale uniforme panneau, c'est à dire la distance entre ses enfants doivent être la même. J'ai réussi à le faire avec la mise en page horizontale, mais est resté coincé à la verticale de la mise en œuvre.

Html:

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table style="margin: 250px; width:70px; height: 400px; background-color: #ccc; table-layout: fixed;">
<tr>
<td style="vertical-align: middle; background-color: Gray; padding: 5px;">
<!-- <div style="margin-top:-20px; width:50px; height: 40px; background-color: Green;">1</div>-->
<div style="margin: -20px auto auto auto; width:50px; height: 40px; background-color: white;">Top!!!</div>
<div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">2</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; background-color: Gray; padding: 5px;">
<div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">3</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; background-color: Gray; padding: 5px;">
<div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">4</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; background-color: Gray; padding: 5px;">
<div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">5</div>
</td>
</tr>
</table>
</body>
</html>
InformationsquelleAutor user1514042 | 2012-07-20
  1. 2

    à l'aide de la position relative et le fond que la forme négative de la hauteur de la zone de

    http://jsfiddle.net/e9uet/

    • upvote et cochez la chose à côté de la question de savoir si vous avez trouvé la réponse, vous aide.
    • pas une bonne façon de le faire
    • très bon!!! Je vais le marquer comme réponse, mais pourriez-vous avoir un coup d'oeil à la mise à jour de question?
    • oui. Je suis trop paresseux pour séparer le style css. ce qu'il entend , ce n'est pas une bonne idée de mettre le css dans le styl="" mettre dans le css et <link href="myCSSfile.css" type="text/css">
    • essayez de les nettoyer dans le jsfiddle.net/e9uet , en déplaçant le style en css , il est difficile pour moi de regarder le code html après la modification
    • Une chose qui serait utile, c'est d'avoir box-sizing: border-box régler la hauteur des éléments, semblable à la width: auto élément de la largeur de remplir le reste de la largeur.

    InformationsquelleAutor wizztjh
  2. 2

    Si ils n'ont pas toujours à être en haut-en bas de la 1ère à la dernière commande ne vous essayez simple inline-blocks? Qui devrait leur permettre de remplir à l'horizontale, puis les envelopper à la verticale lorsqu'il n'est pas assez d'espace. 

    .columns .icon { display: inline-block; width: 80px; height: 80px; background-color: lightblue; margin: 10px }

    http://jsfiddle.net/JT3La/

    InformationsquelleAutor Matt Pileggi