如何在圖像之間留出空間？

如何在圖像之間留出空間？（如果將一個圖像，它會顯示一些文字，我不知道這是否會做出一些型動物）

CS：

.row1{ 
float:left; 
padding: 30px; 


} 
.row2{ 
float:left; 
padding: 30px; 

} 
.row3{ 
float:left; 
padding: 30px; 


}

從上下。

ROW1：左側

行2圖片：圖片中間

ROW3：右側圖像

 <div class="row1"> 
      <h3>Track/spots</h3> 
     <div id="wrapper"> 
      <img src="producten/banaan.jpg" alt="large luxe beach" width="300" height="200" class="hover" /> 
        <p class="text">Banaan Spot <br> Prijs: vanaf &euro;58,75 </p> 
      </div> 

      <div id="wrapper"> 
      <img src="producten/track.jpg" width="300" height="200"class="hover" /> 
       <p class="text">Track Rail, Track Light <br> Aansluiting: 3 fase rail <br> Prijs: vanaf &euro;64,95 <br> Kleur: 3000K/4000K</p> 
        </div> 

      <div id="wrapper"> 
      <img src="producten/led.jpg" width="300" height="200" class="hover" /> 
       <p class="text">MR 16 spot <br> Aansluting: GU10/GU5.3<br> Voltage: 12V | 230V<br> Prijs: vanaf &euro;5,95<br>Kleur: 2500K// 2700K/3000K/4000K </p> 
      </div> 
     </div> 

      <div class="row2"> 
      <h3>Ledstrip</h3> 
       <div id="wrapper"> 
      <img src="producten/lestrip.jpg" alt="large luxe beach" width="300" height="200" class="hover" /> 
        <p class="text">Ledstrip, SMD 5050, SMD 2835, RGB <br>Voltage: 12V/24V<br> Prijs: vanaf &euro;8,95 </p></div> 
     <div id="wrapper"> 
      <img src="producten/kleur.jpg" width="300" height="200" class="hover" /> 
        <p class="text"></p></div> 
     <div id="wrapper"> 
      <img src="producten/profiel.jpg" width="300" height="200" class="hover" /> 
    <p class="text"></p></div> 


     </div> 
       <div class="row3"> 

      <h3>Panelen</h3> 
        <div id="wrapper"> 
      <img src="producten/panel2.jpg" alt="large luxe beach" width="300" height="200" class="hover" /> 
        <p class="text">Rond Paneel<br> Aansluting: N.V.T.<br>Wattage: 6W/15W/18/20W/24W<br>Prijs: vanaf &euro;21,95</p></div> 
        <div id="wrapper"> 
      <img src="producten/panel.jpg" width="300" height="200" class="hover" /> 
       <p class="text">Vierkant Paneel<br> Aansluting: N.V.T.<br>Wattage: 36W/40W/42W<br>Voltage: 230V<br>Prijs: vanaf &euro;34,95<br>Kleur: 3000K/4000K</p></div> 
        <div id="wrapper"> 
      <img src="producten/rechthoek.jpg" width="300" height="200" class="hover" /> 
    <p class="text"></p> 
     </div> 
      </div>

我利潤率嘗試過，但它沒有工作

來源

2017-01-11 Augurkturk

爲什麼設置包裝的高度至少比圖像高20％？ –

爲了與id="wrapper"所有這些div加個班img-wrapper具有以下屬性：

.img-wrapper{ 
    height:400px; //Just to set an example. 
    margin:5%; 
}

然後在你的HTML：

<div id="wrapper" class="img-wrapper"> 
      <img src="producten/profiel.jpg" width="300" height="200" class="hover" /> 
    <p class="text"></p></div>

來源

2017-01-11 15:00:52

給父母div，保證金值。

來源

2017-01-11 14:57:20 Learner

最好的辦法是使用CSS的visibility財產，MDN link

從文檔「可見性屬性可以用於隱藏元素，同時保留原來的空間。它還可以隱藏表格的行或列「

做了一個小的小提琴，這將還挺適合的場景。

fiddle here

設置初始值隱藏，並使用相應的CSS選擇器切換徘徊時。例如：

p { 
    visibility: hidden; 
} 

.content:hover+p{ 
    visibility:visible; 
}

來源

2017-01-11 15:03:57 semuzaboi

如何在圖像之間留出空間？

回答

相關問題