位置是指元素相对于其容器的位置,通常在水平轴和垂直轴上。
所以我正在为学校做一个项目,编写一个网站。我有一个充当导航栏的标题部分,一个充当浮动块的 main_body 部分,其中包含所有信息,还有...
我正在尝试制作一个包含 3 个图像的页面,每个图像都在一个 div 内,但是当应用 box-shadow 时,下面有一个间隙。 包含问题示例的图像 身体 { 边距:...</desc> <question vote="0"> <p>我正在尝试制作一个包含 3 个图像的页面,每个图像都在一个 div 内,但是当应用 box-shadow 时,下面有一个间隙。</p> <p><a href="https://i.sstatic.net/BHtrUKhz.jpg" rel="nofollow noreferrer">包含问题示例的图像</a></p> <pre><code><style> body { margin: 0; } .img img { width: 300px; height: 300px; } .contenedor { display: flex; justify-content: center; align-items: center; height: 100vh; } .tarjeta { margin: 20px; position: relative; box-shadow: 0px 0px 10px 10px gray; } .cuerpo { position: absolute; top: 0; } </style> <body> <div class="contenedor"> <div class="tarjeta"> <div class="img"> <img src="img/image1.jpg" alt=""> </div> <div class="cuerpo"> <div class="texto"> <h3>Juanita</h3> <p>Modelo: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, nihil.</p> </div> </div> </div> </code></pre> <p>我想将盒子阴影效果应用到每个 div 上,而不在下面留下间隙。我尝试将 height: 100% 应用于图像,以便它们占据 div 的整个高度,但它不起作用。这个问题仅在应用box-shadow时出现;如果我消除这个效果,这个差距就会消失。我还尝试过调整边距、填充和框大小属性,但它们似乎都不能解决问题。我正在寻找一种解决方案,允许我应用盒子阴影效果,而不会在 div 之间创建任何不需要的间隙。</p> </question> <answer tick="false" vote="0"> <p>这是因为,默认情况下,图像是 <pre><code>display: inline</code></pre> 并与任何相邻文本的基线对齐。基线下方的空间用于文本中的下行部分。</p> <p>最简单的解决方法是将图像本身设置为 <pre><code>display: block</code></pre> 或 <pre><code>display: inline-block</code></pre>。另一种选择是将父级的行高调整为小于 1 的值。</p> </answer> </body></html>
如何在 Rust Slint 项目中设置窗口位置和 z-index?
我正在尝试使用 Rust Slint GUI 项目。 但我不知道如何设置窗口级别始终高于其他窗口。(如 z-index: 10000) 另外,如果运行它,应该显示在计算机的右侧...
我的问题很简单,我有一个绝对定位的div,它的box-shadow rgba颜色没有降级,看起来很丑。当我将 div 位置设置为相对位置时,框阴影不会渲染...
所以我有一个div,它是一张卡片和其中的内容。我设法让它向上移动一点,但过渡属性似乎不起作用。 这是 HTML 代码 <... 所以我有一个 div,它是一张卡片和其中的内容。我设法让它向上移动一点,但过渡属性似乎不起作用。 这是 HTML 代码 <div class="card"> <p> Title </p> </div> 这是 CSS 代码 .card:hover { position: relative; top: -10px; transition: 1s; } 所以基本上有多个卡片,并且当鼠标悬停在 .card 类的每张卡片上时它都会向上移动,但它会瞬间移动,过渡不起作用。有谁知道如何修复它?祝你有美好的一天 这是因为您仅在 position 代码块中指定了 transition 和 :hover,这意味着直到悬停已经发生之后才指定转换时间。换句话说,仅悬停时更改的项目(top值)应位于:hover中。 在 position 块之外指定 transition 和 :hover,例如: .card { position: relative; transition: 1s } .card:hover { top: -10px; } 您可以使用transform: translateY 试试这个 body { display: flex; justify-content: center; align-items: center; height: 100vh; } .box { border: 1px solid black; width: 150px; height: 150px; cursor: pointer; transition: all .5s ease-in-out; } .box:hover { transform: translateY(-10px); } <div class="box"></div> 不用使用 top ,它需要一个位置属性将其移出流程,只需添加一个边距来替换元素: .card:hover { margin-top: -20px; margin-bottom: 20px; transition: 1s; } /* for visualization purpose only */ body { padding-top: 50px; } div { border: 2px solid black; display: flex; justify-content: center; align-items: center; height: 40vh; width: 10vw; } <div class="card">Card</div @Mohamad 的回答很正确,但如果您想要更流畅的动画和更短的动作,请尝试: .box { transition: all .3s ease-in-out; } .box:hover { transform: translateY(-5px); }
我在页面顶部有一个 div (#top),并在页面底部设置了一个具有绝对位置的 div (#bottom)。我在中间有一个 div (#middle) 和一个内部组件 (#middle-inner)。我愿意
Flutter Geolocator.getCurrentPosition() 不返回任何内容
我使用 Geolocator 软件包已经有一段时间了,它运行良好,但在过去 2 天它不起作用。 我正在尝试获取最后一个已知位置,如果没有,我会尝试获取当前位置
我正在使用 ggplot2 在 R 中创建维恩图。 但是,我想将集合名称的标签(“OST 上的 ID”和“ITT 上的 IR”)从圆圈顶部移动到...
所以,问题出在我的 RawScrollBar 上。将它放在 ListView 内没有问题,但我需要它位于所有容器之外。我可以像图片上那样把它放在外面,但看起来好像在那里......
在 ggplot (plotnine) 中使用position_dodge2 分组条形图列定位,以防丢失观察结果
我有一个分组条形图,有 2 组。如果在某种情况下,特定列没有观测值,则该组的另一列居中。我找不到办法规避这个问题。我想要...
这部作品: gcc a.o b.o -o a -lpthread 这不起作用: gcc -lpthread a.o b.o -o a 并显示一些如下错误: 对“pthread_create”的未定义引用 所以当我使用
我想将我的情节图例放在情节内,在一个方面的第一个情节内。 这是一些示例代码: df=数据.frame( x=runif(10), y=runif(10), 面=代表(c(“a”,“b”),5), 颜色=代表(c(...
尝试使其响应时背景颜色会缩小,我还想在调整大小时将我的项目居中,无法弄清楚
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400; 0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&
如何修复我的 HTML/CSS 代码,使其不与 PHPBB 论坛帖子中的帖子正文重叠
我只想用 HTML+CSS 发表帖子,顶部有四个选项卡,根据我单击的选项卡,我会在帖子中看到不同的内容。我确实有一个代码,但问题是我...
我有一个文本元素。我无法修改该文本。因此,我将尝试通过 CSS:: 修改该文本,然后再使用 content:'test' 样式和position: 绝对样式。在文本元素之后...
我正在尝试创建一个浮动菜单。因此我希望父元素与其子元素重叠。我研究过,子项的 z-index 为 -1,父项的 z-index 应该有效。元素...
我有一个包含以下 3 列的文件 1 a1 abcd 1 2 B1 ACDB 3C1ABCD 我需要根据位置过滤器上的第 3 列的子字符串提取/打印行(2==“b”),因此输出应该...
在 Flame Game Component Render() 覆盖中计算正确位置时出现问题
我有一个自定义火焰游戏 TextComponent,我想在渲染覆盖中绘制额外的内容。我使用 4 个不同的公式来计算位置,但每次尝试都是错误的。这些公式都没有
我有一个 UICollectionView,其框架为 [UIScreen 主屏幕].bounds 和这些属性: _collectionView.pagingEnabled = YES; _collectionView.autoresizingMask = UIViewAutoresizingFlexibleW...
我正在尝试找出在所有设备上确定模型位置(如果需要的话进行缩放)的最佳方法,而不仅仅依赖于匹配媒体。 Ofc 我不能使用 %,所以有什么内置的东西吗...