Я работаю над проектом, где мне нужно загрузить скриншоты, которые скопированы в браузере. Система работает, но у меня есть проблема, чтобы щелкнуть изображения, чтобы показать их в полноэкранном режиме.Сделать элементы ниже абсолютных позиций div clickable
Я сделал JSFiddle того, что он выглядит как:
<div id="screenshot-container" class="vertical-scroll-div">
<div id="editor" contenteditable="true"> </div>
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
</div>
.vertical-scroll-div {
width: 100%;
padding-top: 10px;
height: 220px;
min-height: 220px;
overflow-x: auto;
white-space: nowrap;
border: 2px dashed #a9a9a9;
}
#editor {
position: absolute;
top: 0px;
width: 100%;
height: 220px;
outline: 0;
}
.screenshot {
margin-left: 10px;
height: 200px;
width: 200px;
max-height: 200px;
max-width: 200px;
}
.screenshot:hover {
cursor: pointer;
border: solid 2px #3498db;
}
Редактор div
не может быть использован в качестве родителя, потому что он будет очищен при вставке новой image
.
Надежда у кого-то есть идея.
Благодаря
ничего в jsfiddle – chirag
Ссылка не работает. – Whothehellisthat
Используйте кнопку 'save'. http://i.stack.imgur.com/QoNwy.png –