Включить полосу прокрутки для изображений внутри div - PullRequest
Новая
       33

Включить полосу прокрутки для изображений внутри div

1 голос
/ 24 сентября 2019

У меня есть текстовый контент и несколько изображений внутри div.Div имеют фиксированную ширину.Итак, в CSS я добавил overflow:scroll для div.Это включает полосу прокрутки для всего div.

Но мне нужно включить полосу прокрутки только для изображений.Например: 

<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>

Приведенный выше код состоит из двух изображений и текстового содержимого.Мне нужно включить полосу прокрутки для двух изображений, а не для всего div.Как я могу достичь этого

Пример кода:

https://jsfiddle.net/Dhanapas/qvs3ef0r/15/

Ответы [ 3 ]

0 голосов
/ 25 сентября 2019

Вы можете использовать этот код 

.googleimages {
            width: 100%;
            float: left;
        }        
        .panel {
            width: 200px;
            height: 110px;
            overflow: scroll;
        }        
        p {
            width: 100%;
            float: left;
        }
<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>
0 голосов
/ 25 сентября 2019 
<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>
0 голосов
/ 24 сентября 2019

Вот что я предлагаю: 

<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>
...