[Résolu] Adapter une hauteur d'un bloc texte à une image

Bonsoir,

J'aimerais créer une liste de plusieurs photos ainsi qu'une description à côté.
Voici un exemple d'image :



Simplement que mon "bloc" texte s'adapte en hauteur avec l'image qui se trouve à côté.

Pour l'instant, je ne trouves aucune solution, je suis dessus depuis une semaine, je travaille en ul/li avec des float, et quand je met height 100% cela ne fonctionne pas.

Bien à vous,

Tia.
Modifié par Tia (12 Jun 2015 - 16:01)

Bonsoir,

Je vais tester le display block

voici ce que j'ai pour le moment.

<section class="projects">

<ul class="projets">

	<li class="bloc">
		<a href="#"><img src="./_img/cocoa_casa@2x.jpg" alt="projet cocoa casa">
		</a>
		<li class="bloc_text"><h3> web </h3></li>
	</li>	
	


	<li class="bloc"><h3> typographie </h3></li>

	<li class="bloc">
		<a href="#"><img src="./_img/letterines.jpg"  alt="lettrines"></a>
	</li>



	<li class="bloc">
		<a href="#"><img src="./_img/hlettring.jpg"  alt="hand lettring"></a>
	</li>

		<li class="bloc"><h3> typographie </h3></li>


	<li class="bloc"><h3> webapp </h3></li>

	<li class="bloc">
		<a href="#"><img src="./_img/funfacts.jpg"  alt="lettrines"></a>
	</li>


</ul>
</section>

ul.projets {
	padding: 0;
	margin: 0;
	width: 100%;
	clear: both;
}

li.bloc {
	width: 50%;
	position: relative;
	background-color: #fcfcfc;
}


li.bloc_text {
	float: right;
	width: 50%;
	height: 100%;
	background-color: #fcfcfc;
}

li.bloc:after {
  content: '';
  display: block;
  clear: both;
}

bonsoir,

float et l'alignement vertical ne vont pas de pairs, tu peut bricoler quelque choses avec inline-block http://codepen.io/anon/pen/jPwxYy

L'ideal serait display:flex; mais uniquement pour nos derniers navigateurs.

gc-nomade a écrit :
bonsoir,

float et l'alignement vertical ne vont pas de pairs, tu peut bricoler quelque choses avec inline-block http://codepen.io/anon/pen/jPwxYy

L'ideal serait display:flex; mais uniquement pour nos derniers navigateurs.

Merci beaucoup pour votre lien!
Cela répond parfaitement à ce que je souhaite