1
ラジオボタンをクリックしたときに個々の画像を表示する画像表示があります。ラジオボタンに関連付けられた画像は、その位置で垂直方向にシフトします。以下の例では3つのラジオボタンが付いた3つの画像が表示されています。ラインの高さを0に設定しようとしましたが、ホワイトスペースを試しました。しかし動作しませんでした。どんな助けもありがとう。css3垂直画像シフトを防止
<style>
#imgflow {
\t width: 60%;
\t overflow: hidden;
\t text-align:center;
\t margin:0 auto;
}
#imf_holder article img {
\t width: 100%;
}
#imf_holder .inner {
\t width: 100%;
\t line-height: 0;
}
#imf_holder article {
\t width: 100%;
}
.img-control {
\t display: block;
\t text-align: center;
}
input[type="radio"] ~.ps{
\t display:none;
}
input[type="radio"]:checked ~.ps{
\t display:block;
}
input[type=radio] {
opacity: 0;
}
</style>
<html>
<div id="imf_holder">
<div id="imgflow">
<div class="inner">
<article>
\t \t \t \t
\t \t \t \t <input type="radio" checked value="Img1" name="event" id="img-1" ><div class="ps"> <img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" height="200px" ></div>
\t \t \t \t
\t \t \t </article>
<article>
\t \t \t \t
\t \t \t \t <input type="radio" value="Img1" name="event" id="img-2" ><div class="ps"> <img src="http://www.hdwallpapery.com/static/images/Winter-Tiger-Wild-Cat-Images_vwV1tOp.jpg" height="200px" ></div>
\t \t \t \t
\t \t \t </article>
<article>
\t \t \t \t
\t \t \t \t <input type="radio" value="Img1" name="event" id="img-3" ><div class="ps"> <img src="http://eskipaper.com/images/images-4.jpg" height="200px" ></div>
\t \t \t \t
\t \t \t </article>
</div>
</div>
</div>
<div style="margin-left:20px;margin-right:20px;margin-top:15px;">
<li class="img-control">
<label for="img-1" >button1 </label>
<label for="img-2" >button2 </label>
<label for="img-3" >button3 </label>
</li>
</div>
トリック。あなたの返事を感謝します – user3616577