Comment bloquer un float sur une ligne

**pierrot10** · 17/02/2018, 00h21

Bonjour,

Je refais un petit site qui a deux lignes et 3 colonnes par ligne.

Le code html est simple:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>title</title>
 
  <meta name="description" content="">
  <link href="css/style.css" rel="stylesheet">
 
  <script src="js/script.js"></script>
 
 
</head>
<body>
 
	<section id="row">
		<section class="col1" id="dis">
			col1
		</section>
		<section class="col2">
			<figure>
				<img alt="" id="logo" class="img-responsive" src="img/logo.jpg">
			</figure>
		</section>
		<section class="col3">
			menu
		</section>
		<section class="col4 hidden-xs">
			temp
		</section>
 
	</section>
 
	<section id="row">
		<section class="col1">
			col1
		</section>
		<section class="col2">
			<p class="turquoise">
				toto
			</p>
			<p>
				titi
</p>
 
		</section>
		<section class="col3 col-xs-">
		<!--	<figure>-->
				<img alt="IMAGE2" class="img-responsive" src="img/01.jpg">
		<!--	</figure>-->
		</section>
		<section class="col4 hidden-xs">
			temp
		</section>
 
	</section>
 
 
	<script src="js/jquery.min.js"></script>
    <script src="js/scripts.js"></script>
 
</body>
</html>

Donc pour aligner mes colonnes sur une ligne, je fais simplement

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.col1, .col2, .col3{
	float:left;
	border-top:1px dotted #fff; /* !!!!! */
}

Donc jusqu'à la ca fonctionne.
Notez l'image de la deuxième ligne, troisième colonne.

Maintenant, quand je redimensionne mon navigateur avec la souris, et ben il y a effet "bootstrap"; la colonne 3 passe sous la 2, la 2, sous la 1, et surout quand lorsque le navigateur arrive au niveau de l' image de la deuxième ligne...

Au lieu que mes colonnes s'empilent l'une dessous l'autre, j'aimerais que mon image diminue proportionnellement à la diminution de la largeur de mon navigateur. Mais évidement, ceci ne se produit pas, car "sa" colonne passe sous la colonne précédente.

Je me demande s'il n'y a pas de solution pour bloquer l'alignement des colonnes un peu comme si j'avais fait un tableau???

J'ai essayé avec

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

display:inline;

mais ca ne change rien et je suis sûre qu'il y a un truc.... non?

Merci!

**psychadelic** · 17/02/2018, 04h26

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width: 33%;

?

Invité · 17/02/2018, 04h58

Bonjour,

1- n'abuse pas des balises <section>. <div> suffit ici.

2- puisque tu parles de "tableau", regarde :

display:table; display:table-cell;
display:flex;

3- Quant à l'image :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

img { max-width:100%; }

**pierrot10** · 17/02/2018, 09h30

Hello
Ca s'affiche bine!! Merci!!

Il y a un truc qui me surprant quand à l'image.

J'ai bien 4 colonne qui reste sur chaque ligne (PC, j'ai remplacé mes section par des div)
la colonne 1,2,3,4 se trouvent l'une à cote de l'autre et ne passent plus dessous la précédente quand je diminue la taille du navivateur, MAIS, le texte de la colonne deux est sous l'image de la colonne 3!!

Je précise, le texte se trouve toujours de la colonne 2 (la deuxième ligne), mais il est aligné sur le bas de l'image de la colonne 3 !!! C'est étrange non?

J'ai vérifié mon code HTML et je ne vois pas d'erreur.

Invité · 17/02/2018, 09h51

Moi non plus je ne vois pas l'erreur.
Je ne vois pas non plus ton code (corrigé)...

**pierrot10** · 17/02/2018, 15h12

Hello
Ben au niveau du html, j'ai juste modifier les section en div et au niveau du css, j'ai modifié cette ligne

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.col1, .col2, .col3, .col4{
	/*float:left;*/
	display:table-cell;
	border-top:1px dotted #ff22ff; /* !!!!! */
}

Le mieux serait de regarder directement le code
http://www.smart-idea.io/temp/sca/
On voit bien le texte au dessous de l'image

Comment bloquer un float sur une ligne

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager