Div占据整页宽度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Div占据整页宽度相关的知识,希望对你有一定的参考价值。

我实现了一个悬停状态,当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占据了屏幕的整个宽度(见图)。

enter image description here

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

谢谢

答案

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

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

我给你的建议是使用语义html,有2个元素专门用于你想要实现的figurefigcaption

添加了一个示例。

.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>
另一答案

请看这个。

.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>
另一答案

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

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

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

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

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

另一答案

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

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

以上是关于Div占据整页宽度的主要内容,如果未能解决你的问题,请参考以下文章

Div占据整个剩余宽度[重复]

让 div 占据剩余宽度的 100%? [复制]

r 占据不同宽度的Div

容器的宽度/div的宽度即使换成不同的屏幕分辨率也不会占据页面的整个宽度

使div占据父级的剩余宽度[重复]

底部的android寻呼机标签条带走整个片段