Question

我有一行包含5张图片，下面有描述，但如果描述的宽度不同，则图片会上下移动，而不是在同一行上。

这是我的情况：

HTML：

<div class="background">
 <div class="layer">
  <div class="div-diviso-contenitore">
   <div class="div-diviso">
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
     <div class="overlay">
     </div>
   </div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Silvia Fait</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio internalizzazione</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: estero@confimiemilia.it</p><br>
<p style="color:#20bed0; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Linkdein</p><br>
</div>
  </div>
  <div class="div-diviso-contenitore">
   <div class="div-diviso">
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
     <div class="overlay">
     </div>
   </div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Claudio Zamparelli</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio ufficio economico finanziario fiscale</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: fiscaletributario@confimiemilia.it</p><br>
</div>
  </div>
  <div class="div-diviso-contenitore">
   <div class="div-diviso">
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
     <div class="overlay">
     </div>
   </div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Roberta Magnani</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio commerciale & sviluppo</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: relazioniassociative@confimiemilia.it</p><br>
<p style="color:#20bed0; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Linkdein</p><br>
</div>
  </div>
  <div class="div-diviso-contenitore">
   <div class="div-diviso">
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
     <div class="overlay">
     </div>
   </div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Barbara Vanni</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio formazione</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: formazione@confimiemilia.it</p><br>
<p style="color:#20bed0; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Linkdein</p><br>
</div>
  </div>
  <div class="div-diviso-contenitore">
   <div class="div-diviso">
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
     <div class="overlay">
     </div>
   </div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Sandro Campani</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio relazioni sindacali</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: sindacale@confimiemilia.it</p><br>
<p style="color:#20bed0; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Linkdein</p><br>
</div>
  </div>
 </dvi>
</div>

的CSS：

.background {
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
}

.layer {
    background-color: rgba(18, 29, 47, 0.96);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 200px 20px 200px 20px;
}

.div-diviso {
    width: 100%;
    position: relative;
}

.div-diviso-contenitore {
    width: 17%;
    margin: 10px;
    display: inline-block;
    position: relative;
}

.div-diviso img {
    width: 100%;
    position: relative;
}

.div-diviso .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  transform: scale(0.1);
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -o-transform: scale(0.1);
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  visibility: hidden;
}

.div-diviso:hover .overlay {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  visibility: visible;
  border: 3px solid #ffffff;
  transform: border 2.75s;
}

@media (min-width: 768px) and (max-width: 980px) {
 .layer {
    text-align: center;
}
.div-diviso-contenitore {
    width: 47%;
    margin: 10px;
}
}

@media (max-width: 767px) {
 .layer {
    text-align: center;
}
.div-diviso-contenitore {
    width: 98%;
    margin: 5px;
}
}

这就是我想要的：

Answer 1

由于垂直对齐，问题正在发生。设置vertical-align: top;的值，您将获得预期的输出。

<强> Plunkr

.div-diviso-contenitore {
    width: 17%;
    margin: 10px;
    display: inline-block;
    position: relative;
    vertical-align: top;
}

Answer 2

请参阅此fiddle

添加此CSS

.div-diviso-contenitore {
   vertical-align: top;
 }

Answer 3

首先，您需要为班级div-diviso-contenitore指定一个特定的高度。

我在这里重写了课程div-diviso-contenitore

.div-diviso-contenitore {
    display: inline-block;
    height: 400px; // give your specific height value
    margin: 10px;
    overflow: hidden;
    position: relative;
    width: 17%;
    word-wrap: break-word;
}

与您的班级有什么不同

height: 400px;
word-wrap: break-word;
overflow: hidden;

检查这个小提琴：https://jsfiddle.net/ganesh16889/wfe58x97/

同一行上的图像和图像描述（Css Html）

3 个答案: