Position de la div à l'intérieur d'une image (responsive)
J'ai un problème (évidemment).
J'ai pour la position d'un élément à être toujours sur le côté droit de l'image.
Mais je ne peux pas utiliser le img-Tag comme un conteneur.
Aussi, je suis en utilisant bootstrap, ce qui fait qu'il est impossible de définir une largeur fixe pour le conteneur.
Petit exemple jsFiddle
<div id="container" class="col-lg-3">
<div class="positioning">
Some Text
</div>
<img src="http://placehold.it/300x200/eeeeee" />
</div>
J'espère que c'est compréhensible
EDIT:
Fondamentalement, je veux que l'image se comporte comme un conteneur, sans l'aide de "background-image"
- Quelque chose de similaire au jsfiddle?
- Avez-vous besoin d'utiliser une balise img ou pourriez-vous définir l'arrière-plan de la div de l'image?
- pensez que vous auriez à utiliser la balise image pour faire de la div de garder la hauteur de l'image lors du redimensionnement
- Ce besoin de plus d'explication. Il y a beaucoup de façons de l'interpréter.
- unfortionally non, l'Élément est placé dans le conteneur, redimensionner la fenêtre un peu
- Je peux utiliser le fond des images, mais je veux éviter d'utiliser inline-style, le src de l'img sera stockée dans une variable
- voir révisé à la réponse ci-dessous
Vous devez vous connecter pour publier un commentaire.
Envelopper l'image et de la légende dans un div avec
position: relative
comme dans cette Violonhtml
CSS
Je pense que le
<figure>
balise est la meilleure solution ici.Voici un exemple: http://jsfiddle.net/mzd7maqq/7/
<figure>
comme un inline-block [jsfiddle.net/mzd7maqq/7/] C'est la même réponse que @Last1Here mais c'est HTML5 sympathique 🙂Vous pouvez utiliser la propriété float et la placer à droite.
Une position absolue de l'élément sera toujours positionné relatives à celle du parent qui a des "position: relative'. Voici un bon exemple http://learnlayout.com/position.html
Donc, si vous enveloppez-la et le contenu à l'intérieur d'un div et la position relativement, alors vous pouvez positionner le contenu absolument à l'intérieur. Ensuite, vous avez juste besoin de faire le display: block; et la largeur de 100% de sorte que le remplissage de l'ensemble du conteneur.
Voici un exemple: http://jsfiddle.net/kbzvyjy9/
Espère que cela résout votre problème.