div占据页面的整个宽度答案

【问题标题】：Div taking up full width of pagediv占据页面的整个宽度
【发布时间】：2021-02-10 13:42:41
【问题描述】：

我已经实现了一个悬停状态，当 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 包装到实际图像的大小，以便仅在该图像悬停时实现悬停状态，而不是在 蓝色部分 内的任何位置悬停时实现。 p>

谢谢

【问题讨论】：

请为img标签取一个父div，以免img覆盖整个div。
我不能因为父页面被用于页面的不同方面

标签： html css hover

【解决方案1】：

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

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

我给你的建议是使用 semantic 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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

默认div标签有一个默认显示属性display: block

在您的代码中 <div class="desktop-image"> div 显示全宽

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：