Question

如何在图像之间留出空间？（如果你悬停一个图像，它会显示一些文字，我不知道这是否会产生一些不同的颜色）

CS：

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


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

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


}

从上到下。

第一行：左侧的图像

第二行：中间的图像

第3行：右侧的图像

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

我尝试了保证金，但它没有用

Answer 1

提供父div，保证金值。

Answer 2

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

Answer 3

最好的办法是使用CSS的visibility属性MDN link

来自文档＆＃34; 可见性属性可用于隐藏元素，同时保留原有空间。它还可以隐藏表格的行或列＆＃34;

做一个小小提琴，有点适合这种情况。

fiddle here

在悬停时使用适当的CSS选择器将初始值设置为隐藏和切换。例如：

p {
  visibility: hidden;
}

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

你怎么能在图像之间留出空间？

3 个答案: