如何在图像之间留出空间？

如何在图像之间留出空间？（如果将一个图像，它会显示一些文字，我不知道这是否会做出一些型动物）

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

如何在图像之间留出空间？

回答

相关问题