J'ai du contenu textuel et quelques images dans un div. les Div ont une largeur fixe. Donc, dans le css, j'ai ajouté overflow: scroll pour le div. Il active la barre de défilement pour l'ensemble de la div.
Mais je dois activer la barre de défilement uniquement pour les images. par exemple:
<html> <body> <div class="panel">You can use the overflow property when you want to have better control of the layout. <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> The default value is visible.You can use the overflow property when you want to have better control of the layout. <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" > The default value is visible.You can use the overflow property when you want to have better control of the layout. </div> </body> </html>
Le code ci-dessus a deux images et du texte. Je dois activer la barre de défilement pour les deux images et non pour le div entier. comment puis-je y parvenir
Exemple de code:
3 Réponses :
Voici ce que je propose:
<html>
<head>
<style>
.panel {
width: 200px;
overflow: hidden;
}
.image-container {
overflow: scroll;
}
</style>
</head>
<body>
<div class="panel">You can use the overflow property when you want to have better control of the layout.
<div class="image-container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
The default value is visible.You can use the overflow property when you want to have better control of the
layout.
<div class="image-container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
The default value is visible.You can use the overflow property when you want to have better control of the
layout.
</div>
</body>
</html>
Vous pouvez utiliser ce code
<div class="main">
<p>You can use the overflow property when you want to have better control of the layout.</p>
<div class="googleimages">
<div class="panel">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
</div>
</div>
<p>The default value is visible.You can use the overflow property when you want to have better control of the layout.</p>
<div class="googleimages">
<div class="panel">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
</div>
</div>
<p>The default value is visible.You can use the overflow property when you want to have better control of the layout.</p>
</div>
.googleimages {
width: 100%;
float: left;
}
.panel {
width: 200px;
height: 110px;
overflow: scroll;
}
p {
width: 100%;
float: left;
}
<html>
<head>
<style>
.panel {
width: 200px;
overflow: scroll;
}
.scroll{
overflow-x: scroll;
}
</style>
</head>
<body>
<div class="panel">You can use the overflow property when you want to have better control of the layout.
<div class="scroll">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
The default value is visible.You can use the overflow property when you want to have better control of the layout.
<div class="scroll">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
The default value is visible.You can use the overflow property when you want to have better control of the layout.
</div>
</body>
</html>