PHPfrance

la communauté d'entraide francophone dédiée au PHP

Display Inline-Block, boites alignées au sommet

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Display Inline-Block, boites alignées au sommet

Re: Display Inline-Block, boites alignées au sommet

par Stef » 19 avr. 2010, 10:14

J'ai trouvé une solution: la propriété vertical-align; ici j'e lui ai mis la valeur text-top, et ça correspond à ce que je voulais (du moins sous FF (pas tester encore ailleurs)).

Mon code corrigé donc:
.annexbox {
	display: inline-block;
	margin: 0 2px;
	padding: 10px;
	border: 1px solid #bfbfbf;
	width: 25%;
	text-align: left;
	vertical-align: text-top;
}

Display Inline-Block, boites alignées au sommet

par Stef » 19 avr. 2010, 10:03

Hi : )

Dur de résumé mon problème dans le titre...

J'essaie de construire des boites qui doivent prendre place l'une à côté de l'autre, pour ce faire j'ai mis la valeur inline-block à leur propriété display; ces boites vont deux par deux (deux sur une ligne) et sont centrées en étant disposés à l'intérieur d'un conteneur.

Le problème c'est que lorsque les boites ont des hauteurs différents, la plus petite est positionnée au bas du conteneur, et non en haut comme je le pensais. Voir la capture du résultat

Image

Voici le code: 
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>Title</title>
		<style type="text/css">
		.annexcont {
			margin: 15px 0 20px 0;
			text-align: center;
			display: block;
		}
			.annexbox {
				display: inline-block;
				margin: 0 2px;
				padding: 10px;
				border: 1px solid #bfbfbf;
				width: 45%;
				text-align: left;
			}
		</style>
	</head>

	<body>
		<div class="annexcont">
			<div class="annexbox">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			</div>
			<div class="annexbox">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			</div>
		</div>
	</body>

</html>
Est-ce que j'ai oublié un truc, le petit détail qui change tout...? Je ne vois vraiment pas comment faire pour que les boites plus courtes restent en haut du conteneur, là elles se retrouvent au bas, et c'est pas chouette...

Merci pour votre aide! : )