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

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

Answer 5

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

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