By
Mix9
есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1
.content{
width: 90%;
background-color: #333;
}
.video{
margin: 0px 4px 0px 4px;
width: 310;
display: flex;
flex-direction:column;
}
.video_button_text{
margin-top: 10px;
display: flex;
flex-direction: row;
font-size: 20px;
color: white;
}
.video_text_div{
display: inline-block;
width: 250px;
}
.video_text{
text-align: justify-all;
margin: 0px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.slidan_videos{
margin: 0px 10px 0px 20px;
overflow: auto;
width: auto;
margin-bottom: 50px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
<div class="content">
<div class = slidan_videos>
<div class = video>
<div>
<a href = 'ссылка'><img class="img" src=""картинка"></a>
</div>
<div class = video_button_text>
<div class = avatarka_div>
<a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a>
</div>
<div class = video_text_div>
<p class = video_text><a href="ссылка">текст</a></p>
</div>
</div>
</div>
Question
CreamQ
Вопрос в следующем:
При нажатии на кнопку создается элемент "entireDrink ", в который добавляется input-картинка и span-текст, "entireDrink " получает тег "one" в котором указан параметр "White-space: nowrap;". При повторном нажатии на ту же кнопку меняется span-текст, а при нажатии на другую добавляется еще один такой же элемент и т.д.
Мне надо, чтобы в окне div эти элементы переносились на новую строку, но не разделялась картинка с текстом, а получается, что "entireDrink "s просто множатся по оси-x.
Если добавлять без White-space: nowrap, то все элементы переносятся отдельно: картинки и тексты.
В другом месте, созданном заранее в html это работает, т.е. узлы с тегом "one" переносятся на новую строку сразу со всем содержимым.
Помогите, пожалуйста, разобраться. Заранее спасибо.
Ниже на скриншотах: 1) заполнение без "White-space: nowrap;" 2) С "White-space: nowrap;"
Вот кусок кода:
Уточнение
Link to comment
Share on other sites
6 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.