Div占据整页宽度

Question

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

这是代码 -

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

由于

Answer 1

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

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

我建议你使用语义 HTML，有2个元素专门用于你想要实现的目标figure＆amp; figcaption

添加了一个示例。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

将CSS属性clear: both添加到具有类desktop-image的div。

Answer 5

指定.desktop-image类的宽度，以.desktop-image{width:70%;}为单位的百分比或任何适合页面设计的百分比。

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