Problème de CSS sans tableau

Question

En général, je sais comment utiliser le CSS mais pas le CSS avancé. J'ai donc besoin d'aide pour commencer. Malheureusement, je n'arrive pas à trouver de bon guide décent pour les tables sans CSS et la partie que je veux faire est très délicate. Voici ce que je veux et ce que j'ai déjà fait.

La hauteur n'est pas fixe, donc je veux qu'elle soit flexible car le texte principal peut être très long ou très court.

Voici ce que j'ai fait jusqu'à présent:

http://jsfiddle.net/VmnDj/1/

Cela ne semble pas fonctionner correctement car la hauteur minimale est là où se trouve le texte principal, et cela n'inclut jamais toute l'image. Une partie de l'image dépasse du conteneur. Pouvez-vous s'il vous plaît contribuer à résoudre ce problème et m'expliquer pourquoi il faut suivre chaque étape? Mon but est d'apprendre de cette expérience et non seulement d'avoir la solution. Si vous avez besoin de plus d'informations, veuillez me le faire savoir. Merci beaucoup d'avance.

Answer 1

Essayez ceci :

JSFIDDLE : http://jsfiddle.net/86FMw/

Remarquez qu'il n'y a pas de hauteur fixe et que la boîte grandira lorsque le texte principal sera plus long.

HTML

        texte du haut texte du haut texte du haut

        texte texte texte texte
        texte texte texte texte texte texte texte texte texte texte texte texte texte 
        texte texte texte texte texte texte texte texte   

        cliquez-moi

CSS

.cartitem {
    position: relative;
    padding-left: 80px;
    border: 1px solid #333;
}

.left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
}

.toptext {
    background: silver;
}

.buttonbar {
    text-align: right;
}

Answer 2

Ce design semble avoir été utilisé autrefois dans des cadres.

Essayez ceci pour le DIV en haut à droite : définissez le code pour Text2 comme ceci :

p.tab {
  margin-top: -2em;
  margin-left: /* spacer_distance en em/px */;
}

J'ai créé 3 colonnes de texte pour imiter un tableau sur certaines de mes pages puisque le texte affiché n'était pas très large au départ.

Gardez à l'esprit que nous traitons désormais avec des utilisateurs de périphériques mobiles. Ainsi, avoir seulement 2 colonnes dans ce DIV devrait fonctionner. Cependant, faites attention à répartir davantage de texte dans cet espace sans utiliser de déclarations de largeur minimale sur l'ensemble du viewport.