0
웹 사이트의 재고가 부족한 경우 이미지 오버레이를 만들려고합니다. 여기에 몇 가지 예제 코드는 다음과 같습니다두 이미지 오버레이 : 위치 유지
<html>
<head>
<style type="text/css">
.box {
display: inline-block;
vertical-align: top;
text-align: center;
min-width: 200px;
max-width: 200px;
min-height: 200px;
max-height: 400px;
margin-bottom: 5px;
margin-right: 5px;
margin-top: 5px;
margin-left: 5px;
}
.prod {
position: absolute;
height: 120px;
width: 200px;
}
.out {
position: relative;
height: 120px;
width: 200px;
z-index: 1;
}
.prodex {
height: 120px;
width: 200px;
}
</style>
</head>
<body>
<?php
for ($i = 1; $i <= 10; $i++) {
echo "<div class='box'>";
echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />";
if ($i == 4 || $i == 7) {
echo "<img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />";
}
echo "<br/>";
echo "lorem ipsum etc etc";
echo "</div>";
if ($i == 5) {
echo "<br/>";
}
}
echo "<br/><br/><br/><br/>";
echo "<div class='box'>";
echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prodex' />";
echo "<br/>";
echo "lorem ipsum etc etc";
?>
</body>
</html>
여기에 출력입니다 :
(보조 노트로, PHP의 바이올린이 내가 이런 종류의 잘못된 복사/붙여 넣기 전체 코드를 느낀다)
이미지의 처음 두 행에 대해서는 항목 4와 7이 매진되어 오버레이가 제대로 작동합니다. 그러나 무엇보다도 아무것도 올바르게 정렬되지 않습니다. 아래쪽의 세 번째 행에 대해서는 세 번째 CSS 클래스를 사용하여 올바르게 표시했습니다.
저는 상대적/절대/기타 위치에 너무 좋지 않습니다. 그것은 확실한 것과 관련이 있습니다. 재고가없는 항목이 세 번째 행과 같이 표시되지만 재고 항목은 처음 두 항목의 올바른 항목과 같이 표시되도록하려면 어떻게해야합니까?
나는 아래에서 할 수 있지만, 제 3의 클래스 (단지 처음 두 개)를 사용하지는 않을 것입니다.
if ($i == 4 || $i == 7) {
echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />";
echo "<img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />";
} else {
echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prodex' />";
}
이 다음과 같은 출력을 제공합니다
문제는 내가 사용하지 않으려한다/다른 복잡하고 세 번째 CSS 클래스의 경우.
건배, 나는 그것이 위치와 함께 할 것을 알고 있었다. 비록 그것이 어떻게 작동하는지에 대한 좋은 아이디어가 있지만, 거의 사용하지 않는 것입니다. 그래도 겹치는 부분은 확실하지 않았습니다. 감사! – gator