position 相关问题

我正在尝试制作一个包含 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>

html css flexbox position

回答 0 投票 0

如何在 Rust Slint 项目中设置窗口位置和 z-index？

我正在尝试使用 Rust Slint GUI 项目。但我不知道如何设置窗口级别始终高于其他窗口。（如 z-index: 10000）另外，如果运行它，应该显示在计算机的右侧...

rust position height z-index slint

回答 1 投票 0

绝对定位div上的Box-shadow不会降级

我的问题很简单，我有一个绝对定位的div，它的box-shadow rgba颜色没有降级，看起来很丑。当我将 div 位置设置为相对位置时，框阴影不会渲染...

css position

回答 1 投票 0

悬停可顺利向上移动 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); }

html css hover position card

回答 4 投票 0

如何增长一个div来填充其他两个div之间的空间？

我在页面顶部有一个 div (#top)，并在页面底部设置了一个具有绝对位置的 div (#bottom)。我在中间有一个 div (#middle) 和一个内部组件 (#middle-inner)。我愿意

html css position height

回答 1 投票 0

Flutter Geolocator.getCurrentPosition() 不返回任何内容

我使用 Geolocator 软件包已经有一段时间了，它运行良好，但在过去 2 天它不起作用。我正在尝试获取最后一个已知位置，如果没有，我会尝试获取当前位置

flutter localization position geolocator

回答 1 投票 0

在 R 中的维恩图上移动集合名称的位置

我正在使用 ggplot2 在 R 中创建维恩图。但是，我想将集合名称的标签（“OST 上的 ID”和“ITT 上的 IR”）从圆圈顶部移动到...

r label position venn-diagram

回答 1 投票 0

如何在ListView之外对齐滚动条？

所以，问题出在我的 RawScrollBar 上。将它放在 ListView 内没有问题，但我需要它位于所有容器之外。我可以像图片上那样把它放在外面，但看起来好像在那里......

flutter position scrollbar

回答 1 投票 0

在 ggplot (plotnine) 中使用position_dodge2 分组条形图列定位，以防丢失观察结果

我有一个分组条形图，有 2 组。如果在某种情况下，特定列没有观测值，则该组的另一列居中。我找不到办法规避这个问题。我想要...

python ggplot2 position bar-chart plotnine

回答 1 投票 0

编译错误gcc -lpthread位置

这部作品： gcc a.o b.o -o a -lpthread 这不起作用： gcc -lpthread a.o b.o -o a 并显示一些如下错误：对“pthread_create”的未定义引用所以当我使用

gcc compiler-errors linker position

回答 1 投票 0

将图例放置在构面的第一个图中

我想将我的情节图例放在情节内，在一个方面的第一个情节内。这是一些示例代码： df=数据.frame( x=runif(10), y=runif(10), 面=代表（c（“a”，“b”），5），颜色=代表（c（...

r position ggplot2 legend

回答 3 投票 0

尝试使其响应时背景颜色会缩小，我还想在调整大小时将我的项目居中，无法弄清楚

@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&

flexbox background position width

回答 1 投票 0

position 相关问题

最新问题