28173 sujets

CSS et mise en forme, CSS3

Forcer float à rester sur une seule ligne ?

Bonjour, cela peut sembler simple comme question, mais je ne trouve nul part une réponse à ma question.

Disons que je doive positionner 4 blocs l'un à côté des autres avec des float:left; comme ceci :

http://brol.tomasz.be/case1.png

Voici ce qui se passe si je resize la fenêtre de mon browser :

http://brol.tomasz.be/case2.png

Comment dans ce cas ci, forcer mes 4 blocs à rester sur un seule ligne (et donc ici ajouter une barre de scroll horizontale à mon browser) ?

Merci Smiley cligne
Modérateur
bonjour

ça ressemble encore a un tableau Smiley smile

exemple pour reprendre le du display:table , mais surtout pour remettre en evidence l'alternative du display:inline-block (dans IE) pour un element a la base de type block et non pas de type inline qui prends bien cette valeur.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>encore un faux tableau</title>
<style type='text/css'>
div {display:table;border-spacing:1em;min-height:50px}
div div {display:table-cell;border:1px solid;width:200px;height:100%;vertical-align:top;}
div div p {min-width:190px;padding:5px;margin:0;}/* force une largeur minimale de la cellule CSS */
</style>
 <!--[if IE]>
<style type="text/css">
div {display:inline;zoom:1;/* equivalent au display:inline-block appliqué sur un element de type 'inline' dans IE  (layout + comportement inline)*/
_height:50px;/* underscore pour IE6 */
white-space:nowrap; /* force l'affichage sur une ligne dans IE */}
div div   {margin:0.5em;
_height:50px;/* underscore pour IE6 */}
div div p  {white-space:normal;/* attention a repassé cette valeur aux enfantde div div. */}
</style>
<![endif]--> 
</head>
<body>
	<div>
	<div><p>paragraphe dyuy_yds dsgguygrs gsq rttr</p><p>paragraphe dyuy_yds dsgguygrs gsq rttr</p></div>
	<div><p>paragraphe</p></div>
	<div><p>paragraphe</p></div>
	<div><p>paragraphe</p></div>
</div>
</body>
</html>



L'approche ne doit pas ce faire dans l'idée de passer un tableau en div , mais d'appliquer une certaine mise en forme qui peut paraitre similaire , et dans IE avec dans certains cas une alternative acceptable .

C'est aussi une façon de voir un comportement inattendu dans IE , et de le reconnaitre si il provoque un bug ou de le provoqué occasionnellement.(le layout encore une fois .. terme barbare et mysterieux, ...).

gc
Et sinon, si les flottants ont une largeur fixe en pixels, on peut les placer dans une seule div de largeur N pixels. Smiley smile
Sujet clos
Aller à