Comment bloquer un float sur une ligne
Bonjour,
Je refais un petit site qui a deux lignes et 3 colonnes par ligne.
Le code html est simple:
Code:
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:
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
mais ca ne change rien et je suis sûre qu'il y a un truc.... non?
Merci!
