Имеется проблема, которую уже достаточно долго пытался исправить, затем пришла мысль: а что, если все можно решить каким-то неведомым мне
хаком на CSS.
Суть: имеется контейнер, в котором есть несколько div-элементов - оберток:
<section id="container">
<div class="items-container">
<div class="item" data-w="200" data-h="150"><img src="image1.jpg" alt=""></div>
<div class="item" data-w="150" data-h="100"><img src="image1.jpg" alt=""></div>
<!-- N "div"-elements with "img" -->
<div class="item" data-w="250" data-h="250"><img src="image1.jpg" alt=""></div>
</div>
<div class="items-container">
<div class="item" data-w="200" data-h="150"><img src="image1.jpg" alt=""></div>
<div class="item" data-w="150" data-h="100"><img src="image1.jpg" alt=""></div>
<!-- N "div"-elements with "img" -->
<div class="item" data-w="250" data-h="250"><img src="image1.jpg" alt=""></div>
</div>
</section>
<style>
.item {
float: left;
margin: 5px;
overflow: hidden;
position: relative
}
.item img {
display: block;
width: auto;
height: 100%
}
</style>
Первое и последнее изображение во втором и первом контейнере соответственно находятся в разных блоках =>
не соприкасаются (не знаю, как правильнее объяснить), можно ли изменить это каким-то образом, используя стили? Например, задать какой-нибудь
display: document-fragment. Необходимо сделать эти обертки буквально неучитываемыми, чтобы все работало так, будто "дети" контейнеров находятся вне их?
Средний
