Comment empècher un élément de passer sous le conteneur ?

**filtep** · 08/11/2013, 00h06

Bonsoir,

j'ai besoin de savoir (je prépare un slide) comment on peut empècher un élément qui "dépasse" de son conteneur de passer en dessous et avoir ainsi un
affichage partiel de l'élément qui va dépasser.

Code :

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
 
<html>
<head>
<style>
.general{
position:absolute;
width:80%;
height:70%;
top:15%;
left:10%;
border: solid 1px red;
}
 
.sous_bloc{
display:inline;
float:left;
height:100%;
width:17%;
border: solid 1px blue;
}
 
</style>
</head>
<body>
<div class="general">
  <div class="sous_bloc"></div>
  <div class="sous_bloc"></div>
  <div class="sous_bloc"></div>
  <div class="sous_bloc"></div>
  <div class="sous_bloc"></div>
  <div class="sous_bloc"></div>
</div>
 
</body>
</html>

comment faire pour que le 6è bloc "sous-bloc" ne passe pas en dessous ?
pas grave si il dépasse du conteneur, je masque avec des caches.

Merci pour vos idées

Philippe

Invité · 08/11/2013, 01h22

Bonjour,
overflow:hidden; mon général.

**miss_socrates** · 08/11/2013, 21h15

Je mettrais overflow: auto; ainsi il afficherait une barre de défilement si l'élément est trop grand.
Et peut-être qu'en utilisant un z-index, cela éviterait de devoir utiliser des caches.

**rodolphebrd** · 08/11/2013, 23h17

Bonjour,

plutôt qu'employer la propriété overflow pourquoi ne pas utiliser table/table-cell :

Code css :

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
body, html {
 height: 100%;
}
.general{
  display: table;
  margin: 20px;
  width:80%;
  height:70%;
  border: solid 1px red;
}
 
.sous_bloc{
  display: table-cell;
  height:100%;
  border: solid 1px blue;
  background: silver;
}

http://codepen.io/anon/pen/iAHor

Comment empècher un élément de passer sous le conteneur ?

HTML

Vue hybride

Discussions similaires

Partager

Partager