Div占据整页宽度

Question

我实现了一个悬停状态，当div悬停时覆盖文本。

这是代码 -

.desktop-image {
  position: relative;
}

.img_description {
  position: absolute;
  top: -13%;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
}

.desktop-image:hover .img_description {
  visibility: visible;
  opacity: 1;
}

<div id="images" class="misma">
  <div class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <p class="img_description">This image looks super neat.</p>
  </div>
  <div class="mobile-image-misma">
    <img src="http://via.placeholder.com/100x100">
  </div>
</div>

问题当我检查页面时，我注意到div .desktop-image占据了屏幕的整个宽度（见图）。

问题如何将此div换行设置为实际图像的大小，以便悬停状态仅在该图像悬停时实现，而不是在蓝色部分中的任何位置悬停时。

谢谢

Answer 1

默认情况下，div是用display: block定义的，这意味着它们将占用整个可用宽度。

您可以指定.desktop-image将获得display: inline-block;，您将获得想要的结果。

我给你的建议是使用语义HTML，有2个元素专门用于你想要实现的figure和figcaption。

添加了一个示例。

.desktop-image {
  position: relative;
  display: inline-block;
}

.desktop-image img {
  vertical-align: middle;
}

.img_description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
}

.desktop-image:hover .img_description {
  visibility: visible;
  opacity: 1;
}

<div id="images" class="misma">
  <div class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <p class="img_description">This image looks super neat.</p>
  </div>
  <div class="mobile-image-misma">
    <img src="http://via.placeholder.com/100x100">
  </div>

  <figure class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <figcaption class="img_description">This image looks super neat.</figcaption>
  </figure>
</div>

Answer 2

请看这个。

.desktop-image {
  position: relative;
  display: inline-block;
}

.img_description {
  position: absolute;
  top: -13%;
  bottom: 0;
  left: 0;  
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
  right:0;
}
.desktop-image:hover .img_description {
  visibility: visible;
  opacity: 1;
}

<div id="images" class="misma">
  <div class="desktop-image">    
      <img src="http://via.placeholder.com/200x200">
      <p class="img_description">This image looks super neat.</p>    
  </div>
  <div class="mobile-image-misma">
    <img src="http://via.placeholder.com/100x100">
  </div>
</div>

Answer 3

默认情况下，div标签具有默认显示属性display: block

在你的代码中，<div class="desktop-image"> div显示整个显示宽度

设置width:和min-height:属性来解决问题

.desktop-image {
   position: relative;
   width: 200px; /*new*/
   height: 200px; /*new*/
} 

Answer 4

使用类clear: both将CSS属性desktop-image添加到div。

Answer 5

以百分比形式指定.desktop-image类的宽度，如.desktop-image{width:70%;}或适合页面设计的百分比。

通过这样做，图像将保留在此.desktop-image div中。