描述没有显示在正确的位置

Question

我有一个像这样的图像网格：

<div class="city-container container" id="popupContainer">
<div class="row">
    <div class="col col-33">
        <img  src="img/images/opera.jpg" ng-click="showTabDialogOpera($event)"/>
          <div class="description" style="font-size: 8pt"><strong>Opera de Lyon</strong></div>
     </div>

    <div class="col col-33">
      <img  src="img/Image1.jpg" ng-click="showTabDialogBasilique($event)"/>
      <div class="description" style="font-size: 8pt"><strong>Basilique de Fourvière</strong></div>
    </div>

    <div class="col col-33">
      <img  src="img/images/hoteldeville.jpg" ng-click="showTabDialogHotel($event)"/>
      <div class="description" style="font-size: 8pt"><strong>Hotel de villde de Lyon</strong></div>

    </div>
</div>

问题在于描述没有显示在正确的位置。

CSS：

.city-container .description {
  position: absolute;
  width: 90%;
  text-align: center; 
  padding: 5px;
  line-height: 1.5;
  background-color: rgba(204, 204, 204, 0.6);
}

Answer 1

我不确定你想要达到的目标。

如果您希望说明显示在图片旁边，请尝试重新映射

position: absolute;

带

display: inline-block;

<强>更新 我已经更新了CSS。抱歉延误。

我缩放图像以适合列的宽度。希望符合您的要求。

.col-33 {
  width: 32%;
  display: inline-block;
}

.col-33 img {
  width: 100%;
}
.col-33 .description {
  width: 100%;
  text-align: center; 
  padding: 5px 0px;
  line-height: 1.5;
  background-color: rgba(204, 204, 204, 0.6);
}

<div class="city-container container" id="popupContainer">
<div class="row">
    <div class="col col-33">
        <img  src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogOpera($event)"/>
          <div class="description" style="font-size: 8pt"><strong>Opera de Lyon</strong></div>
     </div>

    <div class="col col-33">
      <img  src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogBasilique($event)"/>
      <div class="description" style="font-size: 8pt"><strong>Basilique de Fourvière</strong></div>
    </div>

    <div class="col col-33">
      <img  src="http://dummyimage.com/150x50/00cf75/fff.png&text=IMG" ng-click="showTabDialogHotel($event)"/>
      <div class="description" style="font-size: 8pt"><strong>Hotel de villde de Lyon</strong></div>

    </div>
</div>