css3 предотвратить вертикальное смещение изображения

У меня есть изображение, которое отображает отдельные изображения при нажатии переключателя. однако изображение, связанное с переключателем, сдвигается вертикально вниз в его положение. в приведенном ниже примере - 3 изображения с 3 связанными переключателями. Я попытался установить высоту линии на 0, а также попробовал пробел: nowrap в css. но не работает. любая помощь приветствуется.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>

источник

2016-04-04 user3616577

я не заменил дисплей непрозрачности остроумие ни, как вы предложили и что сделал трюк. оцените ваш ответ – user3616577

Установите ваш input в display: none;, так как при использовании opacity они невидимы, но по-прежнему занимают пространство, следовательно, толкая вниз изображения.

input[type=radio] { 
    display: none; 
}

Образец сниппет

#imgflow { 
 
    width: 60%; 
 
    overflow: hidden; 
 
    text-align:center; 
 
    margin:0 auto; 
 
} 
 
#imf_holder article img { 
 
    width: 100%; 
 
} 
 
#imf_holder .inner { 
 
    width: 100%; 
 
} 
 
#imf_holder article { 
 
    width: 100%; 
 
} 
 
.img-control { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
input[type="radio"] ~ .ps{ 
 
    display:none; 
 
} 
 
input[type="radio"]:checked ~ .ps{ 
 
    display:block; 
 

 
} 
 
input[type=radio] { 
 
    display: none; 
 
}

<div id="imf_holder"> 
 
     <div id="imgflow"> 
 
      <div class="inner"> 
 
      <article> 
 

 
       <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> 
 

 
      </article> 
 
      <article> 
 

 
       <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> 
 

 
      </article> 
 
      <article> 
 

 
       <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> 
 

 
      </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>

источник

2016-04-04 15:59:40 LGSon

Просто сделать свой inputs абсолютной, как это:

input[type=radio] { 
    opacity: 0; 
    position:absolute; 
}

источник

2016-04-04 16:48:07 lomboboo

css3 предотвратить вертикальное смещение изображения

ответ

Смежные вопросы