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
占据了屏幕的整个宽度(见图)。
问题如何将此div换行设置为实际图像的大小,以便悬停状态仅在该图像悬停时实现,而不是在蓝色部分中的任何位置悬停时。
谢谢
答案
默认情况下,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>
另一答案
请看这个。
.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占据整页宽度的主要内容,如果未能解决你的问题,请参考以下文章