C'est ce que je suis en train de réaliserPositionnement en bas de div dynamique
http://i.stack.imgur.com/e9xZa.jpg
J'ai essayé
jsfiddle.net/RUSm3/
mais comme vous pouvez voir les date chevauche l'image.
J'ajouté à gauche: 215px pour la date
jsfiddle.net/9aw29/
Il semble bon, mais peut-être je n'ai pas une image. Comment puis-je récupérer la date à l'extrême gauche? J'essaye de réaliser ceci sans php.
Si vous avez un div comme ce
<div class="container">
<div class="date">today</div>
</div>
avec ce fragment css votre date div sera positionné à droite en bas de son emballage.
.container {
position:relative;
width: 100px;
height: 180px;
border: solid 1px black;
}
.date {
bottom:10px;
position:absolute;
right:10px;
}
Vous pouvez vérifier travailler here
Je ne suis pas sûr de ce que votre balisage est, mais la solution la plus simple serait d'avoir le titre, le texte et la date tout en un div (à l'intérieur .entry), et faites flotter l'image vers la gauche si elle est là. La date sera positionnée comme vous l'avez déjà fait dans votre exemple. Quand il n'y a pas d'image, le div entier bougera à gauche.
<div class="entry">
<img [...] />
<div>
<h2>Heading</h2>
<p>Entry text</p>
<p class="date">[Date]</p>
</div>
</div>
thx! J'ai essayé cela mais la date se positionnera au fond de la div qui peut avoir plus ou moins de texte. Si je le positionne dans l'entrée div il sera toujours au fond, mais je ne sais pas comment le modifier à gauche, s'il n'y a pas d'image. – sasa
Pour être honnête, je voudrais juste aller de l'avant et faire à votre façon, mais utiliser php ou JavaScript pour ajouter une classe quand il y a une image. Cette classe peut avoir la position du côté gauche via CSS. Je sais que vous vouliez l'éviter, mais l'utilisation de PHP de JavaScript le rendra vraiment dynamique. – stephenhay
Voici ce que j'ai trouvé et ce sera probablement un bon point de départ pour vous. En bref, envelopper les deux zones de texte dans leurs propres divs, et les envelopper dans un div parent. Flotter le div parent vers la droite et faire sa position autre chose que statique. Si la position est statique, vous ne pouvez pas utiliser l'attribut position: absolute avec ses divs enfants.
<style type="text/css">
div.entry{
float: left;
position: relative;
width: 40%;
}
img.left{
float: left;
}
div.right{
float: right;
display: inline;
position: absolute;
height: 100%;
width: 50%;
}
div.topRight{
}
div.bottomRight{
position: absolute;
bottom: 0px;
}
</style>
<div class="entry">
<img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/>
<div class="right">
<div class="topRight">
Some stuff
</div>
<div class="bottomRight">
Some other stuff
</div>
</div>
</div>
Merci pour l'exemple! Cependant je dois aligner la date à gauche. Si je le fais, il va se chevaucher sur l'image et si j'utilise 'right: 200px' pour aligner à droite de l'image, il sera trop indenté quand il n'y a pas d'image. – sasa
@sasa: si vous fournissez plus de votre code de balisage, nous pouvons essayer d'ajuster l'échantillon en conséquence. Je l'ai fait de cette façon parce que je ne connais pas votre balisage – Lorenzo
ok désolé. Je vais montrer le code entier. – sasa