CSS - Aligner les divs horizontalement

Question

CSS - Aligner les divs horizontalement

Demandé el 31 de Août, 2008: Quand la question a-t-elle été
80553 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un div conteneur avec un fixe de largeur et de hauteur, avec overflow: hidden.

Je veux une rangée horizontale de float: left divs l'intérieur de ce conteneur. Les Divs qui sont flottaient gauche sera naturellement pousser sur la "ligne" ci-dessous, apres avoir lu la bande droite de leur parent. Ce sera le cas, même si la hauteur de la mère ne devrait pas permettre cela. C'est à quoi cela ressemble:

Wrong

Comment je l'aime à regarder:

Right

Remarque: l'effet que je veux peut être obtenue en utilisant des éléments inline & white-space: no-wrap (qui est la façon dont je l'ai fait dans l'illustration). Ceci, cependant, n'est pas bon pour moi (pour des raisons trop longues à expliquer ici), que l'enfant divs doivent être flottaient des éléments de niveau bloc.

De l'aide s'il vous plaît!

Demandé el 31 de Août, 2008 par Robin Barnes

Answer 1

5 Réponses

Answer 2

107voto

LucaM Points 1622

Vous pouvez placer une div interne dans le conteneur suffisamment large pour contenir toutes les div flottantes.

 <div id="container" style="background-color:red;overflow:hidden;width:200px">
  <div id="inner" style="overflow:hidden;width: 2000px">
     <div style="float:left;background-color:blue;width:50px;height:50px">
     </div>
     <div style="float:left;background-color:blue;width:50px;height:50px">
     </div>
     <div style="float:left;background-color:blue;width:50px;height:50px">
     </div>
     ...
  </div>
</div>

Répondu el 31 de Août, 2008 par LucaM (1622 Points )

Answer 3

34voto

Kwex Points 859

style="overflow:hidden" pour le parent div et style="float: left" pour tout l'enfant divs sont importants pour que les divs s'alignent horizontalement pour anciens navigateurs comme IE7 et ci-dessous.

Pour les navigateurs modernes, vous pouvez utiliser style="display: table-cell" pour tous les enfants divs et le rendu horizontal sera correct.

Répondu el 13 de Avril, 2011 par Kwex (859 Points )

Answer 4

6voto

Sören Kuklau Points 9445

Cela semble proche de ce que vous voulez:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Sören Kuklau">
	<!-- Date: 2008-08-31 -->
	<style type="text/css" media="screen">
		#foo { background: red; max-height: 100px; overflow-y: hidden; }

		.bar { background: blue; width: 100px; height: 100px; float: left; margin: 1em; }
	</style>
</head>
<body>
<div id="foo">
	<div class="bar"></div>
	<div class="bar"></div>
	<div class="bar"></div>
	<div class="bar"></div>
	<div class="bar"></div>
	<div class="bar"></div>
</div>
</body>
</html>

Répondu el 31 de Août, 2008 par Sören Kuklau (9445 Points )

Answer 5

4voto

fcurella Points 1145

vous pouvez utiliser la propriété clip :

    #container {
       position: absolute;
       clip: rect(0px,200px,100px,0px);
       overflow: hidden;

       background: red;

notez les position: absolute et overflow: hidden nécessaires pour obtenir clip de travail.

Répondu el 31 de Août, 2008 par fcurella (1145 Points )

Answer 6

-1voto

Wolfpack'08 Points 1042

Flotte-les à gauche. Dans Chrome, au moins, vous n'avez pas besoin d'un wrapper, id="container" , dans l'exemple de LucaM.

Répondu el 30 de Juillet, 2012 par Wolfpack'08 (1042 Points )

CSS - Aligner les divs horizontalement

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS - Aligner les divs horizontalement

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: