Essayer d'obtenir le texte vertical pour aligner fond

La mise en page que je suis en train de réaliser est représentée dans cette image: alt text Essayer d'obtenir le texte vertical pour aligner fond

Le code HTML ci-dessous est l'une des nombreuses tentatives qui n'ont pas travaillé. Le projet est destiné à HTML5 dans les derniers navigateurs seulement, il n'est donc pas nécessaire de travailler dans quoi que ce soit d'autre que Chrome, Safari, Firefox et (avec un peu de vent) IE9 beta.

<!DOCTYPE html> 
<html> 
<body> 
    <div style="border: solid 1px red; width:600px; height: 600px"> 
     <span style="-webkit-transform:rotate(- 

90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span> 
     <img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg" 

style="position:absolute;bottom:600px" /> 
    </div> 
</body> 
</html>

Source

2010-10-01 Nestor

Je suppose que vous voudrez peut-être quelque chose comme ceci: http://jsfiddle.net/aNscn/3/

bottom: 600px va vous mènera nulle part - qui va juste mettre les éléments 600px loin du bas de l'écran de l'utilisateur. Au lieu de cela, donnez à l'div un position: relative extérieur et laissez les deux éléments s'aligner à son fond avec une valeur bottom suffisamment faible. Consultez également la propriété transform-origin pour obtenir le positionnement du span correct après la rotation.

#outer { 
    border: solid 1px red; 
    width:600px; 
    height: 600px; 
    position: relative; 
} 

#text { 
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin: left top; 
    -moz-transform: rotate(-90deg); 
    -moz-transform-origin: left top; 
    -o-transform: rotate(-90deg); 
    -o-transform-origin: left top; 
    transform: rotate(-90deg); 
    transform-origin: left top; 
    position: absolute; 
    bottom: 0; 
    left: 5px; 
} 

#img { 
    position:absolute; 
    bottom: 15px; 
    left: 30px; 
}

Source

2010-10-01 09:13:23

Wow, cela fonctionne. Très impressionnant. Juste une chose cependant - la gauche: 30px sur l'image suppose la largeur du texte. Est-il impossible de faire flotter l'image à la droite du texte automatiquement? – Nestor

@Nestor Pas vraiment, pas avec cette approche au moins, bien que vous puissiez essayer d'utiliser des unités 'em' à la place si cela vous aide. –

Essayer d'obtenir le texte vertical pour aligner fond

Répondre

Questions connexes