相关疑难解决方法(0)
<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有可能比图像本身更高？似乎无法解决这个问题.谢谢.
3
推荐指数
推荐指数
1
解决办法
解决办法
1070
查看次数
查看次数
包含图像的div底部的空格
对于这个小提琴,为什么底部有空格div#imageDiv？
<div>
<div>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" />
</div>
</div>
</div>
<div id="text"><div id="inner">text goes here</div></div>
html {
line-height: 1.5em;
}
#text {
background-color: grey;
margin-top:-7px;
}
2
推荐指数
推荐指数
1
解决办法
解决办法
4318
查看次数
查看次数
HTML5视频容器略大于视频
我有一个html5视频标头，仅按一个问题就可以正常工作，该容器比视频高4像素。除非容器在视频中覆盖了插入阴影，而且阴影略微延伸到视频下方，否则不会有什么问题。
我display: inline-block在父div上的某个地方读到了某个设置，该设置使它只能扩展到其子级的大小，但是在我尝试时并没有任何改变。
的CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
video {
width: 100%;
height: 100%;
}
.vidContainer {
position: relative;
width: 100%;
height: 100%;
}
.vidShadow {
position: absolute;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-box-shadow: inset 0 0 0 500px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 0 0 500px rgba(0,0,0,.5);
box-shadow: inset 0 0 0 500px rgba(0,0,0,.5);
}
的HTML
<div class="vidContainer">
<video loop autoplay>
<source src="media/headerVideo.webm" type="video/webm">
<source src="media/headerVideo.mp4" type="video/mp4"> …2
推荐指数
推荐指数
1
解决办法
解决办法
1176
查看次数
查看次数
div 的高度大于图像
我是前端开发的菜鸟。最近，我写了这样的代码：
<div style="background-color:red">
<img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'>
</div>image(logo.jpg)的高度是80px，div的高度是82px。为什么？
2
推荐指数
推荐指数
1
解决办法
解决办法
1835
查看次数
查看次数
内联块div的大空空间
我试图通过使用内联块并排放置两个div.出于某种原因,我看到其中一个div有一个很大的空白空间.
我在http://codepen.io/weima/pen/eKEbD创建了一支笔
有问题的div是具有类.input-area的div.如果我display:inline-block从.input-area css中移除空的空间,那么我将无法将这两个div并排放置.
反正有没有使用float？
1
推荐指数
推荐指数
1
解决办法
解决办法
91
查看次数
查看次数
为什么我的形象下面有空间？
请注意,在以下屏幕截图中,图像下方有一个空白区域:
我不明白为什么会有这个差距,我该怎么删除它.该页面的网址为http://goo.gl/Kf8FV5
标记:
<section id="pricing-table">
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="10"> </td>
<td width="760" height="10" colspan="4" align="left" valign="top"><img src="images/membership-plans-design_03.png" alt=""></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" …1
推荐指数
推荐指数
1
解决办法
解决办法
152
查看次数
查看次数
当 DIV 的高度设置为“100%”时，为什么计算出的 DIV 高度大于其内容（如 svg）？
这是我的代码：
<!DOCTYPE html>
<html>
<body>
<div align="center" style="width:100%; height:100%; padding: 0px; margin: 0px;">
<svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-0" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);">
<circle cx="500" cy="250" r="100" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
</body>
</html>我得到的 SVG 计算尺寸为 1000 X 500，但 DIV 的计算尺寸为 1264 X 504。
DIV 的宽度 - 1264px 是页面的宽度，因为它以 100% 的形式提供，即可以理解，但为什么高度是 504px，而 SVG 高度是 500px？
提前致谢。
1
推荐指数
推荐指数
1
解决办法
解决办法
1185
查看次数
查看次数
CSS网格，插入图像时底部的边距
我正在尝试使用CSS网格，但遇到了一个（可能是愚蠢和基本的）问题。因此，我试图基本上在网格内的div中插入一个图像，并在底部创建某种填充。
#test {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#square1 {
background-color: red;
}
#square2 {
background-color: blue;
}
#square3 {
background-color: yellow;
}<div>
<div id="test">
<div id="square1"><img src="https://wepushbuttons.com.au/wp-content/uploads/2012/03/twitter-logo-small.jpg"></div>
<div id="square2"></div>
<div id="square3"></div>
</div>1
推荐指数
推荐指数
1
解决办法
解决办法
723
查看次数
查看次数
如何摆脱导航栏和图片之间的空间？
我不知道如何从我的导航栏和图片中删除这个空间..
我的导航栏和图像的 CSS 代码是：
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner 是图像 ID。
html 是这样的： …
0
推荐指数
推荐指数
1
解决办法
解决办法
3402
查看次数
查看次数
如何将 img 转换为链接并让 <a> 标记为其包含的图像的高度
这是我的html：
<a id="test" href="monogram/index.html">
<img src="img/MonogramApartmentNS.png" alt="The image">
</a>
这是CSS：
#test {
display: inline-block;
width: 40.0rem;
}
#test img {
width: 100%;
}
图像链接有效。在 css 中，我将 设定为显示为内联块，但 的高度与 img 的高度不匹配。它比它包含的图像高 5 像素。我如何获得与它包含的图像完全相同的高度？我需要这个，因为我在标签周围使用边框。
几张图片：
0
推荐指数
推荐指数
1
解决办法
解决办法
2096
查看次数
查看次数
如何在div内圆角图像
我需要圆形div内圆角底的图像.
我试图设置图像边框半径,但div超过图像.我在哪里弄错了？
有办法解决它吗？或者我们有更好的解决方案？谢谢你的所有答案
这是我的代码
.mainTile{
position: absolute;
background-color: red;
border-radius: 15px;
}
.mainTileHeader
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
.mainTileHeader h2
{
text-align: center;
margin-top: 10px;
color: white;
margin-bottom: 10px;
}
.mainTileImg
{
width: 100%;
-webkit-border-radius: 0 0 15px 15px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 20px;
position: absolute;
right: 10px;
bottom: 10px;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta …0
推荐指数
推荐指数
1
解决办法
解决办法
44
查看次数
查看次数
标签 统计
css ×11
html ×9
height ×1
html5 ×1
image ×1
javascript ×1
padding ×1
positioning ×1
svg ×1
video ×1