相关疑难解决方法(0)
仅 CSS 的方形 div 适合矩形 div
我已经确定了如何根据宽度设置 div 高度（使用百分比宽度和填充底部）。但我还需要能够根据其高度设置 div 宽度。我曾尝试使用 vw/vm/vh 单位，但这些是相对于视口而不是容器。
所以，在下面的例子中
<body>
<div class="rectangle">
<div class="square">
</div>
</div>
</body>
这是一些仅适用于纵向的非工作 CSS：
.rectangle {
background-color:red;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.square {
background-color:blue;
width:100%;
padding-bottom:100%;
}
我希望 .rectangle 填充其容器，这意味着随着窗口大小的变化，.rectangle 可能会从横向布局变为纵向布局。发生这种情况时，我希望 .square div 在不丢失其方形的情况下尽可能地填充。
因此，如果浏览器窗口的宽度大于高度（横向），则 .rectangle 应填充窗口，并且 .square 应与矩形的高度一样高，与矩形的高度一样宽。
如果浏览器窗口的高度大于宽度（纵向），则 .rectangle 应填充窗口，并且 .square 应与矩形的宽度一样宽，与矩形的宽度一样高。
所以，我可以使用媒体查询在横向和纵向之间交换样式，并且我有纵向案例的解决方案，但我还没有找到横向案例的解决方案。如何让正方形填充其父级的高度，并限制其宽度以保持正方形的纵横比？
推荐指数
解决办法
查看次数
如何将textarea设置为100%的宽度和高度？
如何设置<textarea>消耗100%的浏览器窗口宽度和高度？
例如,以下内容不起作用:
html, body, textarea {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}<textarea>Text goes here</textarea>因为它占用的窗口略超过100%,导致出现滚动条:
如何<textarea>消耗100%的空间？
奖金阅读
推荐指数
解决办法
查看次数
黑色不透明度叠加使图像尺寸增大
我有一个小问题,真的很烦我.每当我的图像悬停在上面时,会出现带有不透明度的黑色叠加层.但是,它会使图像高度增长.请注意,我不是指变换,规模属性.实际图像在图像底部的高度增长.
是什么造成的？
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});#home-img-block-section {
width: 100%;
height: 900px;
}
#home-img-blocks {
width: 100%;
height: 450px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
float: left;
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-block:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: …推荐指数
解决办法
查看次数
按钮高度大于嵌套内容的高度
我正在使用引导程序 4 alpha。
<button class="btn btn-link p-0">
<div style="display:inline-block; background-color:#c2f5ff; width: 100px; height: 100px;">
</div>
</button>
我在按钮内嵌套了一个 div。我在 div 上设置了高度和宽度。我的按钮宽度适合 div，但按钮的高度比它需要的要大。当您单击按钮时，蓝色轮廓不适合内容。
为什么会发生这种行为？
推荐指数
解决办法
查看次数
如何在CSS中为图像添加内部阴影
我正在尝试为图像添加内部阴影,但我无法得到我想要的结果.
这是我目前的情况:
https://codepen.io/nvision/pen/lBKEy
.shadow {
display: inline-block;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
}
.shadow img {
max-width: 100%;
position: relative;
z-index: -1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
问题是图像底部和实际内部阴影之间的浅灰色填充.我想要的是根本没有填充物.只是一个内在的阴影,就是这样.
这是我想要实现的一个例子:
推荐指数
解决办法
查看次数
为什么我的容器 div 的高度比其中的图像高？
我觉得自己像个新手问这个问题，但我不明白为什么任何 div 容器似乎总是比它包含的内容高。请参阅https://codepen.io/grayayer/pen/XWjBJWZ了解工作示例。
.container {
background-color:red;
height: fit-content;
width: fit-content;
padding: 0;
}<div class="container">
<img src="https://via.placeholder.com/350" height="350" width="350">
</div>就好像底部总是有 5px 的内边距，尽管我已经明确表示不要这样做。
推荐指数
解决办法
查看次数
<a>比<img>孩子高
正如你在这里看到的那样,横幅图像具有一定的高度(响应),但它有一个overlay(#vignette),它与横幅图像一起嵌套在a-tag中.#vignette从其父级获取其高度:
#vignette {
box-shadow: inset 0 0 50px 4px rgba(0,0,0,0.35), inset 0 10px 10px rgba(0,0,0,0.05);
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
并且a-tag将其高度调整为其内容:
a#banner-image {
display: block;
position: relative;
width: auto;
height: auto;
}
那么a-tag有可能比图像本身更高？似乎无法解决这个问题.谢谢.
推荐指数
解决办法
查看次数
为什么图像到边框底部有间隙？
我正在研究两种图像样式，但这里遇到了一个恼人的问题，可能是因为我还不太了解。我想做的是在第一个图像上获得第二个图像，就像贴纸一样（如果你看到底部的 jsFiddle 你会理解更多）
问题是，从我的默认 CSS 中，我在博客上上传的每张图像上都有一个border:2px solid #fff（圆形）。但我不希望将此 CSS 应用于第一个图像前面的第二个图像。
<style>我通过使用帖子上的标签覆盖默认 CSS 来做到这一点。
.post img {border: 0px solid #fff; //default : 2px solid;
-moz-box-shadow:none ; // default ....
-webkit-box-shadow:none ; // default ....
box-shadow:none } // default ....
body { background-color:black;
}
另外，在第一张图片上，我再次添加样式，例如
style="clear: left; float: left; margin-bottom: 1em; border: 2px solid #fff!important;-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8); margin-right: …推荐指数
解决办法
查看次数
排队img和div css
我试图<img>与div 排队,但似乎有一些边距/填充<img>.
这是我试过的:
.Box {
display: inline-block;
}
.myDiv {
background: blue;
width: 100px;
color: white;
}
img {
margin: 0px !important;
padding: 0px !important;
width: 100px;
height: 100px;
background: red;
}<div class="Box">
<div class="myDiv">
Content
</div>
</div>
<div class="Box">
<img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg">
</div>我希望它看起来像这样:
推荐指数
解决办法
查看次数
如何摆脱网格之间的空白？
我正在制作网格，但是上方网格区域下方有一个空白区域。
这是我指的空白。
我正在使用70％30％的网格列模板创建模板。在此之下，我正在使用网格模板区域来扩展整个底部的描述
.home {
display: grid;
grid-template-columns: 70% 30%;
grid-template-areas:
"hero right-home"
"home home"
}
有没有适当的方法来删除上下网格行之间的空间？ Codepen在这里
和摘要：
.home {
display: grid;
grid-template-columns: 70% 30%;
grid-template-areas:
"hero right-home"
"home home"
}
body, html {
margin: 0;
padding: 0;
}
.right-home {
grid-area: right-home;
display: grid;
grid-template-rows: 1fr 1fr;
}
.home-wrapper{
background-color: #e6e6e6;
width: 100%;
grid-area: home;
}
.home-container {
width:80%;
margin: auto;
padding-bottom: 40px;
}
.hero {
grid-area: hero;
}
#main-map {
max-width: 96%;
}
#main-map iframe { …推荐指数
解决办法
查看次数
标签 统计
css ×10
html ×9
image ×3
bootstrap-4 ×1
border ×1
box-shadow ×1
css-grid ×1
display ×1
height ×1
javascript ×1
jquery ×1
positioning ×1
textarea ×1